纯JS 绘制数学函数

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

<html> 
<head> 
<title>JS绘制数学<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>图</title> 
<style type="text/css"> 
body{ 
margin: 0px; 
padding: 0px; 
} 
</style> 
    <script> 
    //辅助<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a> 
function $(id){return document.getElementById(id)}; 
/** 
    * 绘图对象 
    * 包含各个绘图<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>，比如画点，线段，多边形，圆等 
    * 和一些绘图参数，比如背景颜色，画笔颜色 
**/ 
var Plot = { 
    //画布，所有被画出来的元素都append到这个container 
container: null,//原点x 
ox: 500,//原点y 
oy: 300,//坐标颜色 
baseLineColor: 'black',//画笔颜色 
b<a href="/tag/rush/" target="_blank" class="keywords">rush</a>Color: 'red',//画笔粗细 
b<a href="/tag/rush/" target="_blank" class="keywords">rush</a>Weight: 1,//baseLineX，baseLineY保存坐标线，用于坐标移位 
baseLineX: null,baseLineY: null,//初始化<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>，设置画布，原点位置，坐标线颜色，画笔颜色，画笔粗细 
init: function(containerId,ox,oy,baseLineColor,b<a href="/tag/rush/" target="_blank" class="keywords">rush</a>Color,b<a href="/tag/rush/" target="_blank" class="keywords">rush</a>Weight){ 
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.b<a href="/tag/rush/" target="_blank" class="keywords">rush</a>Color = b<a href="/tag/rush/" target="_blank" class="keywords">rush</a>Color; 
Plot.b<a href="/tag/rush/" target="_blank" class="keywords">rush</a>Weight = b<a href="/tag/rush/" target="_blank" class="keywords">rush</a>Weight; 
Plot.drawCoordinate(); 
},//设置原点<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a> 
s<a href="/tag/eto/" target="_blank" class="keywords">eto</a>Point: function(ox,oy){ 
Plot.ox = ox; 
Plot.oy = oy; 
Plot.container.removeChild(Plot.baseLineX); 
Plot.container.removeChild(Plot.baseLineY); 
Plot.drawCoordinate(); 
},//设置画笔粗细<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a> 
setB<a href="/tag/rush/" target="_blank" class="keywords">rush</a>Weight: function(weight){ 
Plot.b<a href="/tag/rush/" target="_blank" class="keywords">rush</a>Weight = weight; 
},setB<a href="/tag/rush/" target="_blank" class="keywords">rush</a>Color: function(color){ 
    Plot.b<a href="/tag/rush/" target="_blank" class="keywords">rush</a>Color = 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.b<a href="/tag/rush/" target="_blank" class="keywords">rush</a>Weight; 
dot.style.width = Plot.b<a href="/tag/rush/" target="_blank" class="keywords">rush</a>Weight; 
dot.style.position = 'absolute'; 
dot.style.fontSize = '1px'; 
dot.style.backgroundColor = Plot.b<a href="/tag/rush/" target="_blank" class="keywords">rush</a>Color; 
dot.style.overflow = "hidden"; 
Plot.container.appendChild(dot); 
dot = null; 
},//sin<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>曲线，传入角度，比如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',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); 
Plot.setBrushColor('blue'); 
Plot.circle(50,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需刷新才能执行]

纯JS 绘制数学函数

相关推荐