纯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需再刷新一下页面才能执行]

您可能感兴趣的文章:

layui select动态添加option的实例
下面小编就为大家分享一篇layui select动态添加option的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
HTML页面,测试JS对C函数的调用简单实例
下面小编就为大家带来一篇HTML页面,测试JS对C函数的调用简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
JS自调用匿名函数具体实现
定义一个函数用做临时的命名空间，在这个命名空间内定义的变量都不会污染到全局命名空间,需要的朋友可以参考下
2014-02-02
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
这篇文章主要介绍了JavaScript浏览器对象模型BOM(BrowserObjectModel),结合实例形式较为详细的分析了BOM模型的常用对象与相关使用技巧,需要的朋友可以参考下
2016-11-11
javascript解析json格式的数据方法详解
这篇文章主要介绍了javascript解析json格式的数据方法详解，文章通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
JavaScript数据结构中栈的应用之表达式求值问题详解
这篇文章主要介绍了JavaScript数据结构中栈的应用之表达式求值问题,详细分析了中缀表达式、后缀表达式等概念、原理与转换方法,以及基于后缀表达式实现的表达式求值相关操作技巧,需要的朋友可以参考下
2017-04-04
一个精简的JS DIV层tab切换代码
下面的代码是比较精简的js tab切换代码，原理也比较简单。
2010-03-03
JavaScript 对象深入学习总结(经典)
JavaScript中，除了五种原始类型（即数字，字符串，布尔值，null，undefined）之外的都是对象了，所以，不把对象学明白怎么继续往下学习呢？本篇文章给大家分享javascript对象深入学习总结，小伙伴们跟着小编一起深入学习吧
2015-09-09
7个Javascript地图脚本整理
7款JavaScript地图脚本, 大多数都是基于Google地图,也有使用jQuery实现的。
2009-10-10
Javascript实现从小到大的数组转换成二叉搜索树
这篇文章主要介绍了Javascript实现从小到大的数组转换成二叉搜索树的相关资料,需要的朋友可以参考下
2017-06-06

软件下载

源码下载

软件编程

网络编程

在线工具

数据库

CMS

常用工具

纯JS 绘制数学函数

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具