话不多说先贴代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匀速运动</title>
<style type="text/css">
#drawing{
border: 1px dashed #aaa;
}
</style>
<script type="text/javascript">
window.onload=function(){
var drawing=document.getElementById("drawing"),
context=drawing.getContext("2d"),
width=drawing.width,
height=drawing.height,
x=0;
function draw(x,y,context){
context.fillStyle="#76FF00";
context.beginPath();
context.arc(x,y,20,0,2*Math.PI);
context.closePath();
context.fill();
}
setInterval(function(){
context.clearRect(0,0,width,height);
draw(x,height/2,context);
x+=2;
},16.7);
}
</script>
</head>
<body>
<canvas id="drawing" width="1000" height="400"></canvas>
</body>
</html>
