canvas之动态路径的绘制
<!DOCTYPE html>
<html>
<head>
<title>Html5 Canvas Animations</title>
</head>
<body onLoad="init()">
<canvas id="c" width="1200" height="960">
</canvas>
<script>
var speed=30;
var x=10;
var dx=6;
var ctx;
function init(){
ctx=document.getElementById("c").getContext("2d");;
ctx.save();
setInterval(draw,speed);
}
function draw(){
if(x>960){
x=10;
ctx.beginPath();
}
ctx.clearRect(0,0,980,800);
ctx.lineWidth="2";
ctx.lineJoin="round";
ctx.strokeStyle='#e0c';
for(var i=0;i<100;i+=10){
ctx.moveTo(x-dx,50*Math.sin(Math.PI*(x-dx)/90)+200+i*3);
ctx.lineTo(x,50*Math.sin(Math.PI*x/90)+200+i*3);
ctx.stroke();
}
x+=dx;
}
</script>
</body>
</html>
