我完全不懂JavaScript和CSS3。我想实现的是绘制四个圆形的动画。整个过程应该如下:
1. 圆圈#1的动画,动画完成后在内部放置数字78
2. 圆圈#2的动画,动画完成后在内部放置数字460
3. 同上,但内部数字是20
4. 同上,但内部数字是15。
我找到了一个代码段: http://jsfiddle.net/uhVj6/100/
我找到了一个代码段: http://jsfiddle.net/uhVj6/100/
// requestAnimationFrame Shim
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var endPercent = 101;
var curPerc = 0;
var counterClockwise = false;
var circ = Math.PI * 2;
var quart = Math.PI / 2;
context.lineWidth = 10;
context.strokeStyle = '#ad2323';
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
function animate(current) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
context.stroke();
curPerc++;
if (curPerc < endPercent) {
requestAnimationFrame(function () {
animate(curPerc / 100)
});
}
}
animate();
我添加了几行代码。但说实话,我不知道如何加载其中的四个(一个接一个地带有动画),然后在内部显示这些数字(通常放在
中的数字会显示在圆圈下面)。有什么想法吗?谢谢!