纯JS 绘制数学函数

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

<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; iPlot.oy）{ continue; } Plot.drawDot（ i, Math.tan（i/180*Math.PI）*50 ）; } }, //cos函数曲线，传入角度，比如90，180，360 cos: function（angle）{ for（var i=0; iy0）？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> </body> <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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]