<!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>
发表回复