<!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>