纯JS 绘制数学函数_javascript技巧

绘图对象Plot，包含了JS画点，JS画线，JS画正弦sin，JS画余弦cos，tan，圆，多边形。
可设置原点位置，画笔颜色，画笔粗细，坐标线颜色。
其实原理很简单，用长1px宽1px的div模拟点，由点及线，由线及面。
贴上来权当相互学习，以免JS新手觉得js画图是多神秘的事情。

<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> <div id="main" style="border-bottom: solid red 0px; height:100%; width:100%"> </div> <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>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]