<!DOCTYPE html> <html> <head> <meta charset="gbk"> </head> <body> <canvas width="1000" height="600" id="c"></canvas> <script> (function (w) { w['raf'] = w['requestAnimationFrame'] || w['webkit'+r] || w['moz'+r] || w['ms'+r] || w['o'+r] || function(c){ w.setTimeout(c, 1000 / 60); }; var radians = function (deg) { return deg * Math.PI / 180; }; function Fx (x,y,r,cxt){ this.x = x; this.y = y; this.r = r; this.cxt = cxt; this.step = 30; this.counter = 0; cxt.canvas.width = 1000; cxt.canvas.height = 600; this.run(); }; Fx.prototype = { 'run' : function (){ var that = this, c = this.cxt, angle = radians(360* this.counter/this.step); c.clearRect(0,0,c.canvas.width,c.canvas.height); c.save(); c.beginPath(); c.arc( this.x, this.y, 5 , 0 , 2*Math.PI); c.arc( this.x+Math.sin(angle)*this.r, this.y+Math.cos(angle)*this.r, 5 , 0 , 2*Math.PI); c.fillStyle = 'red'; c.fill() c.restore(); if (this.counter>=this.step) { this.counter = 0; }else{ this.counter ++; } setTimeout(function (){ that.run.call(that); },30); } }; w['Fx'] = Fx; }(window)); var cm = new Fx(500,300,200,document.getElementById('c').getContext('2d')); </script> </body> </html>
运行代码