本章节分享一段代码实例,利用canvas绘制正弦
并且具有动态效果,代码实例如下:
<!DOCTYPE html> <html> <head> <style type="text/css"> #theCanvas{ background-color:#63F; } </style> <script type="text/javascript"> var i = 1; var x = 1; var y = 100; function moveSin(){ var oCanvas=document.getElementById("theCanvas"); var content=oCanvas.getContext( "2d" ); content.beginPath(); content.moveTo(x,y); i+=0.1; x=i*10; y=Math.sin(i)*10+100; content.lineTo(x,y); content.stroke(); content.closePath(); } setInterval(moveSin,10); window.onload=function(){ moveSin(); } </script> </head> <body> <canvas id="theCanvas" width="400" height="400"></canvas> </body> </html>
转载自:canvas绘制sin正弦曲线一文。
主页地址:http://www.softwhy.com/