话不多说先贴代码
<!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>