你的位置:首页 > Java教程

[Java教程]js 绘制数学函数

<!-- <!doctype html> --><html lang="en"><head>  <meta charset="UTF-8">  <title>js绘制数学函数</title></head><body>  <div id="main" style="border-bottom:solid red 0px;height:100%;width:100%"></div></body>  <script>    function $(id){return document.getElementById(id)};    /*      绘图对象      绘图函数,比如画点,线,多边形,圆      绘图参数,比如背景颜色,画笔颜色    */    var Plot = {      container : null , //画布      ox : 500 , //原点x      oy : 300 , //原点y      baseLineColor : 'black' , //坐标轴颜色      brushColor : 'red' , //画笔颜色      brushWeight : 1 , //画笔粗细      baseLineX : null , // baseLineX 和 baseLineY 用于坐标移位      baseLineY : null ,      //初始化方法      init : function(containerId , ox , oy , baseLineColor , brushColor , brushWeight ){        if($(containerId)){          Plot.container = $(containerId);        }else{          alert('你必须制定一个区域作为画布!');          return;        }        if((typeof ox) == 'number'){          Plot.ox = ox ;        }        if((typeof oy)== 'number'){          Plot.oy = oy ;        }        Plot.baseLineColor = baseLineColor ;        Plot.brushWeight = brushWeight ;        Plot.brushColor = brushColor ;        Plot.drawCoordinate();      },      //设置原点函数      setOPoint : function(ox,oy){        Plot.ox = ox ;        Plot.oy = oy ;        Plot.container.removeChild(Plot.baseLineX) ;        Plot.container.removeChild(Plot.baseLineY) ;        Plot.drawCoordinate();      },      //设置画笔粗细函数      setBrushWeight : function(weight){        Plot.brushWeight = weight ;      },      setBrushColor : function(color){        Plot.brushColor = color ;      },      // 画坐标轴      drawCoordinate : function(){        var baseLineX = document.createElement('div') ;        baseLineX.style.position = 'absolute' ;        baseLineX.style.left = 0 ;        baseLineX.style.top = Plot.oy ;        baseLineX.style.fontSize = '1px' ;        baseLineX.style.height = '1px' ;        baseLineX.style.width = '100%' ;        baseLineX.style.overflow = 'hidden' ;        baseLineX.style.backgroundColor = Plot.baseLineColor ;        Plot.container.appendChild(baseLineX) ;        Plot.baseLineX = baseLineX ;        var baseLineY = document.createElement('div') ;        baseLineY.style.position = 'absolute' ;        baseLineY.style.left = Plot.ox ;        baseLineY.style.top = 0 ;        baseLineY.style.fontSize = '1px' ;        baseLineY.style.height = '100%' ;        baseLineY.style.width = '1px' ;        baseLineY.style.overflow = 'hidden' ;        baseLineY.style.backgroundColor = Plot.baseLineColor ;        Plot.baseLineY = baseLineY ;        Plot.container.appendChild(baseLineY) ;      },      //清理画布      clean : function(){        Plot.container.innerHTML = '' ;        Plot.drawCoordinate() ;      },      //画点,相对原点      drawDot : function(x,y){        var dot = document.createElement('div') ;        dot.style.left = Plot.ox + x + 'px' ;        dot.style.top = Plot.oy - y + 'px' ;        dot.style.height = Plot.brushWeight ;        dot.style.width = Plot.brushWeight ;        dot.style.position = 'absolute' ;        dot.style.fontSize = '1px' ;        dot.style.backgroundColor = Plot.brushColor ;        dot.style.overflow = 'hidden' ;        Plot.container.appendChild(dot) ;        dot = null ;      },      //sin函数,传入角度      sin : function(angle){        for(var i=0 ; i<angle ; i++){          Plot.drawDot(i,Math.sin(i/180*Math.PI)*100) ;        }      },      // cos函数,传入角度      cos : function(angle){        for(var i = 0 ; i < angle ; i++){          Plot.drawDot(i,Math.cos(i/180*Math.PI)*100)        }      },      //tan函数      tan : function(){        for(var i=0 ; i<720 ; i++){          if(Math.tan(i/180*Math.PI)*100>Plot.oy){            continue ;          }          Plot.drawDot(i,Math.tan(1/180*Math.PI)*50);        }      },      //画线 从 (x0,y0) 到 (x1,y1)      line : function(x0,y0,x1,y1){        // 竖线        if((x1-x0)==0){           for(var i=((y1>y0)?y0:y1) ; i<((y1>y0)?y1:y0); i++ ){            Plot.drawDot(x1,i);          };          return;        };        //横线        if((y1-y0)==0){          for( var i=((x1>x0)?x0:x1); i<((x1>x0)?x1:x0); i++ ){            Plot.drawDot(i,y1);          };          return;        };        //斜线        //K=斜率,直线方程 y=kx + b;        var k = (y1-y0)/(x1-x0) ;        if(k<=1){          for(var i=((x1>x0) ? x0 : x1); i<((x1>x0) ? x1 : x0 );i++){            Plot.drawDot(i,k*i+y1-k*x1);          };        }else{          for(var i=((y1>y0)?y0:y1) ; i<((y1>y0)?y1:y0) ; i++){            Plot.drawDot((i-y1+k*x1)/k,i) ;           };        };        return;      },       // 画圆,radius是半径,(xi,yi)为圆心      circle : function(radius,xi,yi){        if((typeof xi)=='undefined'){          xi = 0 ;        };        if((typeof yi)=='undefined'){          yi = 0 ;        };        // 以i为角度,从0到360        var i = 0 ;        while(i<360){          var _x0 = Math.sin(i/180*Math.PI)*radius ;          var _y0 = Math.cos(i/180*Math.PI)*radius ;          var step = radius/100 ; // 使画出来的圆更圆润          if(1/step > 1){            step = 1 ;          }else if(1/step < 0.2){            step = 0.2 ;          }else{            step = 1/step ;          };          Plot.drawDot(_x0+xi,_y0+yi) ;          i = i + step ;        }      },      //画多边形      polygon : function(dots){        if(typeof dots == 'undefined'){          alert('你应该指定一些点画多边形') ;          return ;        };        if(dots.constructor != Array){          alert('你应该指定一些点画多边形') ;          return ;        };        for(var i = 0 ; i < dots.length-1 ; i++){          Plot.line(dots[i].x , dots[i].y , dots[i+1].x , dots[i+1].y);          if(i ==1 && dots.length==2){break;}        };        Plot.line(dots[0].x, dots[0].y, dots[dots.length-1].x, dots[dots.length-1].y);      },    }  </script>      <!-- test -->  <script>    Plot.init('main',500, 500,'green','red',1);     Plot.sin(720);     Plot.setBrushWeight(3);     // Plot.cos(720);     // Plot.setBrushWeight(2);     // Plot.circle(200,100,100);     // Plot.setBrushColor('purple');     // Plot.circle(100,100,100);     // Plot.setBrushColor('blue');     // Plot.circle(50,100,100);     // var t = new Array();     // var dots = new Array();     // dots[0] = {x:-10,y:-10};     // dots[1] = {x:400,y:10};     // dots[2] = {x:400,y:300};     // dots[3] = {x:10,y:300};     // Plot.polygon(dots);   </script>  </html>

原理:就是用1px*1px的点来画线和面

注意:文件的头部<!doctype html>必须被注释掉

效果图: