canvas绘制sin正弦曲线
分类:实例代码
canvas绘制sin正弦曲线属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,利用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正弦曲线,这样的场景在实际项目中还是用的比较多的,关于canvas绘制sin正弦曲线就介绍到这了。