<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>requestAnimation取代setInterval</title> </head> <body onload="draw()"> <canvas id="myCanvus" width="200px" height="200px" style="border:1px dashed black;"> 出现文字表示你的浏览器不支持HTML5 </canvas> </body> </html> <script type="text/javascript"> <!-- function draw(){ var canvas=document.getElementById('myCanvus'); canvas.width=200; canvas.height=200; context=canvas.getContext('2d'); animate(); }; var delta=0; var contex; function animate(){ context.clearRect(0,0,200,200);// 清屏 delta+=1; // 画线 context.strokeStyle = "black"; context.save(); context.translate(100,100); context.beginPath(); context.moveTo(0, 0); context.lineTo(100*Math.cos(getRad(delta)),100*Math.sin(getRad(delta))); context.stroke(); context.closePath(); context.restore(); // 让浏览器自行决定帧速率，这种方式比setInterval和setTimeout要合理 window.requestAnimationFrame(animate); } // 角度得到弧度 function getRad(degree){ return degree/180*Math.PI; } //--> </script>