html5 动态环形图,HTML5/Canvas 环形渐变色彩动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

(function() {

var lastTime = 0;

var vendors = ['ms', 'moz', 'webkit', 'o'];

for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {

window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];

window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];

}

if (!window.requestAnimationFrame)

window.requestAnimationFrame = function(callback, element) {

var currTime = new Date().getTime();

var timeToCall = Math.max(0, 16 - (currTime - lastTime));

var id = window.setTimeout(function() {

callback(currTime + timeToCall);

},

timeToCall);

lastTime = currTime + timeToCall;

return id;

};

if (!window.cancelAnimationFrame)

window.cancelAnimationFrame = function(id) {

clearTimeout(id);

};

}());

// ends requestAnimationFrame polyfill

var c = document.getElementById("c");

var ctx = c.getContext("2d");

var cw = c.width = window.innerWidth;

var ch = c.height = window.innerHeight;

var R = 200;

var colorsLength = 6;

var A = 360 / colorsLength;

var angleIncrement = 0;

var grd, ap, af, xp, yp, xf, yf;

var rad = (Math.PI / 180);

ctx.lineWidth = 25;

function draw() {

ctx.clearRect(0, 0, cw, ch);

if (angleIncrement >= 360) {

angleIncrement = 0;

} else {

angleIncrement++;

}

console.log(angleIncrement);

for (var i = 0; i < colorsLength; i++) {

ap = A * i;

af = A * (i + 1) + .5;

apRad = rad * ap;

afRad = rad * af;

ctx.beginPath();

ctx.arc(cw / 2, ch / 2, R, apRad, afRad);

xp = cw / 2 + R * Math.cos(apRad);

yp = ch / 2 + R * Math.sin(apRad);

xf = cw / 2 + R * Math.cos(afRad);

yf = ch / 2 + R * Math.sin(afRad);

grd = ctx.createLinearGradient(xp, yp, xf, yf);

grd.addColorStop(0, "hsl(" + (ap + angleIncrement) + ",100%,50%)");

grd.addColorStop(1, "hsl(" + (af + angleIncrement) + ",100%,50%)");

ctx.strokeStyle = grd;

ctx.stroke();

}

requestId = window.requestAnimationFrame(draw);

} //end draw()

function start() {

requestId = window.requestAnimationFrame(draw);

stopped = false;

}

function stopAnim() {

if (requestId) {

window.cancelAnimationFrame(requestId);

}

stopped = true;

}

window.addEventListener("load", start(), false);

c.addEventListener("click", function() {

(stopped == true) ? start(): stopAnim();

}, false);