复制代码 代码如下: (function ($) { $.extend({ timer: function (action,context,time) { var _timer; if ($.isFunction(action)) { (function () { _timer = setInterval(function () { if (!action(context)) { clearInterval(_timer); } }, time); })(); } } });})(jQuery); 复制代码 代码如下: 画布 <BR> #wrap<BR> {<BR> display: table;<BR> margin: 0 auto;<BR> } <P> #cvs<BR> {<BR> display: table-cell;<BR> vertical-align: middle;<BR> }<BR> <BR> function drawRound(context) { <BR> if (context.counterclockwise) {<BR> draw(context.x, context.y, context.r, context.start, context.start - Math.PI / 50, context.counterclockwise);<BR> context.start -= Math.PI / 50;<BR> return context.start > 0.5 * Math.PI;<BR> }<BR> else {<BR> draw(context.x, context.y, context.r, context.start, context.start + Math.PI / 50, context.counterclockwise);<BR> context.start += Math.PI / 50;<BR> return context.start < Math.PI;<BR> }<BR> }<BR> function draw(x, y, r, sAngle, eAngle, counterclockwise) {<BR> var cvs = document.getElementById("cvs");<BR> ctx = cvs.getContext("2d");<BR> ctx.strokeStyle = "#f00";<BR> ctx.beginPath();<BR> ctx.arc(x, y, r, sAngle, eAngle, counterclockwise);<BR> ctx.stroke();<BR> }<BR> $(function () {<BR> $.timer(drawRound, { x: 100, y: 100, r: 50, start: 1.5 * Math.PI, counterclockwise: true }, 200);<BR> $.timer(drawRound, { x: 100, y: 100, r: 60, start: 0, counterclockwise: false }, 200);<BR> });<BR>
