純JS 繪制數(shù)學函數(shù)

2019-11-21 01:24:04

字體：大中小

供稿：網(wǎng)友

繪圖對象Plot，包含了JS畫點，JS畫線，JS畫正弦sin，JS畫余弦cos，tan，圓，多邊形。
可設(shè)置原點位置，畫筆顏色，畫筆粗細，坐標線顏色。
其實原理很簡單，用長1px寬1px的div模擬點，由點及線，由線及面。
貼上來權(quán)當相互學習，以免JS新手覺得js畫圖是多神秘的事情。

<html> <head> <title>JS繪制數(shù)學函數(shù)圖</title> <style type="text/css"> body{ margin: 0px; padding: 0px; } </style>     <script>     //輔助函數(shù) function $(id){return document.getElementById(id)}; /**     * 繪圖對象     * 包含各個繪圖函數(shù)，比如畫點，線段，多邊形，圓等     * 和一些繪圖參數(shù)，比如背景顏色，畫筆顏色 **/ var Plot = {     //畫布，所有被畫出來的元素都append到這個container container: null, //原點x ox: 500, //原點y oy: 300, //坐標顏色 baseLineColor: 'black', //畫筆顏色 brushColor: 'red', //畫筆粗細 brushWeight: 1, //baseLineX，baseLineY保存坐標線，用于坐標移位 baseLineX: null, baseLineY: null, //初始化方法，設(shè)置畫布，原點位置，坐標線顏色，畫筆顏色，畫筆粗細 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(); }, //設(shè)置原點函數(shù) setOPoint: function(ox,oy){ Plot.ox = ox; Plot.oy = oy; Plot.container.removeChild(Plot.baseLineX); Plot.container.removeChild(Plot.baseLineY); Plot.drawCoordinate(); }, //設(shè)置畫筆粗細函數(shù) 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函數(shù)曲線，傳入角度，比如90，180，360 sin: function(angle){ for(var i=0; i<angle; i++){ Plot.drawDot(i,Math.sin(i/180*Math.PI)*100); } }, //tan函數(shù)曲線 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函數(shù)曲線，傳入角度，比如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; //隨著半徑的增大，劃出來的圓周斷斷續(xù)續(xù),下面的做法 //使畫圓周的點數(shù)隨著半徑的增大而增大，使畫出來的圓周更圓潤. 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   class="iwvjtn8m0"   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需刷新才能執(zhí)行]

上一篇：javascript 人物逼真行走,已完成

下一篇：javascript 繪制矩形框