animate输出html5,Using jQuery / HTML5 to animate a circle

问题

For a personal project, I'm tyring to make a timer application (for controlling Poker blind schedules). I know there are several solutions already on the market, but for reasons which are too lengthy to go into here, we need a bespoke system. Although the output template of the system will ultimately be definable by the end user, we would like to include a widget which shows a circle that gets animated as the time counts down. Here's an illustration of a working example, showing the yellow circle and what we'd like to achieve (or something similar, anyway):

My question is, how would one code the animation as shown below using either jQuery or raw HTML5 / CSS3 animations? This is for a web application using jQuery, so there are no other library options I can use.

Advanced thanks!

回答1:

If you can use HTML5, canvas is probably your best bet. Mozilla has some decent tutorials on drawing arcs. This should be enough to get you started.

var canvas = document.getElementById('canvasid'),

width = canvas.width,

height = canvas.height,

ctx = canvas.getContext('2d');

function drawTimer(deg) {

var x = width / 2, // center x

y = height / 2, // center y

radius = 100,

startAngle = 0,

endAngle = deg * (Math.PI/180),

counterClockwise = true;

ctx.clearRect(0, 0, height, width);

ctx.save();

ctx.fillStyle = '#fe6';

// Set circle orientation

ctx.translate(x, y);

ctx.rotate(-90 * Math.PI/180);

ctx.beginPath();

ctx.arc(0, 0, radius, startAngle, endAngle, counterClockwise);

ctx.lineTo(0, 0);

ctx.fill();

}

setInterval(function() {

// Determine the amount of time elapsed; converted to degrees

var deg = (elapsedTime / totalTime) * 360;

drawTimer(deg);

}, 1000);

回答2:

You can achieve this with CSS3 and jQuery.

Check out my example here http://blakek.us/css3-pie-graph-timer-with-jquery/ which with slight modification you could make the timer look how you want it.

回答3:

In HTML5 you can draw in a canvas.

For example:

// Create the yellow face

context.strokeStyle = "#000000";

context.fillStyle = "#FFFF00";

context.beginPath();

context.arc(100,100,50,0,Math.PI*2,true);

context.closePath();

context.stroke();

context.fill();

Link

回答4:

You should really check out Processing!

Especially Processing.js. There have been some interesting things made with it for iPhone

回答5:

First solution i can think of is html5 canvas implementation. From the example above it becomes clear we're talking mobile, so what support does canvas get around mobile browsers i can't tell. developer.mozilla.org provides sufficient documentation. Using canvas to achieve such count down should be pretty simple task. Good luck.

回答6:

HTML5 Canvas arc command (MDN) is probably what you're looking for. Just decrease the end angle over time to have your timer decrease.

来源：https://stackoverflow.com/questions/5755765/using-jquery-html5-to-animate-a-circle