环形图,HTML5/Canvas 环形渐变色彩动画"/>
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);
更多推荐
html5 动态环形图,HTML5/Canvas 环形渐变色彩动画
发布评论