<!DOCTYPE html><html><head> <script type="text/javascript"> // 带有绘制过程的动画 // var i = 1; // var x = 1; // var y = 200; // function moveSin(){ // var my_canvas = document.getElementById( "MyCanvas" ); // var content = my_canvas.getContext( "2d" ); // content.beginPath(); // content.moveTo( x, y ); // i += 0.1; // x = i * 10; // y = Math.sin( i ) * 20 + 200; // content.lineTo( x, y ); // content.stroke(); // content.closePath(); // console.log(x); // if(x>=1000){ // console.log("end"); // window.clearInterval(myTime); // } // } // var myTime = setInterval( moveSin, 10 ); function draw(){ var my_canvas = document.getElementById( "MyCanvas" ); var content = my_canvas.getContext( "2d" ); content.beginPath(); content.moveTo( 1, 100 ); for( var i = 1; i < 100; i += 0.1 ){ // x 应该等于canvas的 width/10 var x = i * 10; var y = Math.sin( i ) * 10 + 100; content.lineTo( x, y ); console.log(x,y); } content.stroke(); content.closePath(); } </script></head><body onload="draw()"><canvas id = "MyCanvas" width="500" height="400"></canvas></body></html>