纯JS 绘制数学函数- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 纯JS 绘制数学函数

技术文章搜索

关键字

Javascript 中的纯JS 绘制数学函数

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 620 ::

收藏到网摘: n/a

javascript 绘制矩形框 javascript Excel操作知识点

今天闲来无事用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; 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, 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 全选提示:你可先修改部分代码,再按运行]

javascript 绘制矩形框 javascript Excel操作知识点

Javascript 中的 纯JS 绘制数学函数

评论 (0) All

Javascript 中的纯JS 绘制数学函数