JS绘制数学函数图

来源：互联网发布：什么叫软件开发编辑：程序博客网时间：2024/06/03 22:57
<html>     <head>     <title>JS绘制数学函数图</title>     <style type="text/css">      body{        margin: 0px;        padding: 0px;      }    </style>       <script>      //辅助函数      function $(id){return document.getElementById(id)};      /**     * 绘图对象     * 包含各个绘图函数，比如画点，线段，多边形，圆等     * 和一些绘图参数，比如背景颜色，画笔颜色     **/      var Plot = {          //画布，所有被画出来的元素都append到这个container        container: null,        //原点x        ox: 500,        //原点y        oy: 300,        //坐标颜色        baseLineColor: 'black',        //画笔颜色        brushColor: 'red',        //画笔粗细        brushWeight: 1,        //baseLineX，baseLineY保存坐标线，用于坐标移位        baseLineX: null,        baseLineY: null,        //初始化方法，设置画布，原点位置，坐标线颜色，画笔颜色，画笔粗细        init: function(containerId, ox, oy, baseLineColor,brushColor,brushWeight){          if($(containerId)){            Plot.container = $(containerId);          }          else{            alert('You should specify an element in which you can draw plot!');            return;          }          if((typeof ox)=='number'){            Plot.ox = ox;          }          if((typeof oy)=='number'){            Plot.oy = oy;          }          Plot.baseLineColor = baseLineColor;          Plot.brushColor = brushColor;          Plot.brushWeight = brushWeight;          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函数曲线，传入角度，比如90，180，360        sin: function(angle){          for(var i=0; i<angle; i++){            Plot.drawDot(i,Math.sin(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(i/180*Math.PI)*50 );          }        },        //cos函数曲线，传入角度，比如90，180，360        cos: function(angle){          for(var i=0; i<angle; i++){            Plot.drawDot(i,Math.cos(i/180*Math.PI)*100);          }        },        //画线从(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('you should specify some dots to draw!');            return;          }          if(dots.constructor!=Array){            alert('you should specify some dots to draw!');            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>    </head>    <body>      <div id="main" style="border-bottom: solid red 0px; height:100%; width:100%">      </div>    </body>    <script>      //测试代码      Plot.init('main', 800, 500, 'green','red',1);      Plot.sin(720);      Plot.setBrushWeight(3);      Plot.cos(720);      Plot.setBrushWeight(2);      Plot.circle(100,200,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>
0 0