纯JS 绘制数学函数

更新时间：2009年04月24日 01:26:04 作者：

今天闲来无事用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 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

javascript 限制输入和粘贴(IE和火狐3.x下测试通过)
限制输入和粘贴的js代码
2008-11-11
前端文件上传实现代码示例(文件上传，分片上传，断点续传)
本文总结了普通文件上传和分片上传的方法,普通上传通过FormData和axios实现文件发送,而分片上传则将大文件切割并并行或串行上传,最后合并分片,提高上传效率和稳定性,还介绍了断点续传和处理上传过程中的异常情况,需要的朋友可以参考下
2024-09-09
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索，与解决方案！
其实这个问题，已经困扰我很近。就是切换浏览器标签之后，再等几十秒的时间切换回来setInterval就乱了阵，过一会又正常了！IE浏览器就没有这种奇怪的现象！
2011-10-10
js调出上下文菜单的实例
这篇文章主要介绍了js调出上下文菜单的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-12-12
浅谈typescript中keyof与typeof操作符用法
本文主要介绍了typescript中keyof与typeof操作符用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
uni-app配置APP自定义顶部标题栏设置方法与注意事项
相信很多小伙伴在使用uniapp进行多端开发的时候,在面对一些业务需求的时候,uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了,这篇文章主要给大家介绍了关于uni-app配置APP自定义顶部标题栏设置方法与注意事项的相关资料,需要的朋友可以参考下
2022-07-07
JS库之Highlight.js的用法详解
highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解，感兴趣的朋友跟随脚本之家小编一起学习吧
2017-09-09
javascript构造函数以及原型对象的理解
本文主要介绍了javascript构造函数以及原型对象的理解。分享了有关它们的实例代码，具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
javascript 设计模式之享元模式原理与应用详解
这篇文章主要介绍了javascript 设计模式之享元模式,结合实例形式详细分析了javascript 设计模式之享元模式相关概念、原理、应用方法及操作注意事项,需要的朋友可以参考下
2020-04-04
JavaScript实现获取两个排序数组的中位数算法示例
这篇文章主要介绍了JavaScript实现获取两个排序数组的中位数算法,涉及javascript数组遍历及数值计算相关操作技巧,需要的朋友可以参考下
2019-02-02

纯JS 绘制数学函数

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具