纯JS绘制数学函数_javascript技巧

来源：匠吉财富

绘图对象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> 
  
 //辅助函数 
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> 
 
 //测试代码 
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需刷新才能执行]