<!DOCTYPE html> <html> <head> <meta charset="gbk"> </head> <body> <canvas id='c' width='800' height='600' style="border:1px solid #ddd"></canvas> <script> if (!window.requestAnimationFrame) { window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) { return window.setTimeout(callback, 17 /*~ 1000/60*/); }); } if (!window.cancelRequestAnimationFrame) { window.cancelRequestAnimationFrame = (window.cancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame || window.oCancelRequestAnimationFrame || window.clearTimeout); } var canvas = document.getElementById( 'c' ), ctx = canvas.getContext( '2d' ), cw = window.innerWidth, ch = window.innerHeight, angle = 0, speed = 0.1, step = 10, raq = null, color = 'rgb(236, 208, 120)'; function drawGuidewire(){ ctx.strokeStyle = '#ddd'; ctx.lineWidth = 0.5; for (var i = step + 0.5; i < canvas.width; i += step) { ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(i, canvas.height); ctx.stroke(); } for (var i = step + 0.5; i < canvas.height; i += step) { ctx.beginPath(); ctx.moveTo(0, i); ctx.lineTo(canvas.width, i); ctx.stroke(); } } drawGuidewire(); (function drawFrame(){ ctx.save(); if ((angle+speed) >= 2*Math.PI) { cancelRequestAnimationFrame(raq); angle = 2*Math.PI; }else{ angle +=speed; raq = requestAnimationFrame(drawFrame,canvas); } ctx.strokeStyle =color; ctx.fillStyle =color; ctx.beginPath(); ctx.arc(canvas.width/2, canvas.height/2, 150,0, angle, false); ctx.arc(canvas.width/2, canvas.height/2, 100, angle, 0, true); ctx.fill(); ctx.stroke(); ctx.restore(); }()); </script> </body> </html>
运行代码