canvas绘图实现浏览器等待效果

一：创建画布

<canvas width="600" height="600" id="canvas" style="border:1px solid red;"></canvas>
<input type="button" id="start" value="start">
<input type="button" id="stop" value="stop">

二：代码实现

(function(window){

var timer;
var iStop = true;
var degree = 0;

var cxt = null;
var _x = 0;
var _y = 0;

var fillStyles = [
'rgba(255, 0, 0, 1)',
'rgba(255, 0, 0, 0.6)',
'rgba(255, 0, 0, 0.3)',
'rgba(255, 0, 0, 0.1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 255, 0.6)',
'rgba(0, 0, 255, 0.3)',
'rgba(0, 0, 255, 0.1)'
];

function draw() {
for(var i=0; i<8; i++){
cxt.save();
cxt.beginPath();
cxt.translate(_x, _y);
cxt.rotate(-degree*Math.PI/180);
cxt.moveTo(0, 0);
cxt.fillStyle = fillStyles[i];
cxt.arc(0, 0, 100, i*45*Math.PI/180, (i+1)*45*Math.PI/180, false);
cxt.closePath();
cxt.fill();
cxt.restore();

if(degree++ == 360){
degree = 0;
}
}

cxt.save();
cxt.beginPath();
cxt.fillStyle = 'white';
cxt.arc(_x, _y, 60, 0, 360*Math.PI/180, false);
cxt.closePath();
cxt.fill();
cxt.restore();
}

function erase() {
cxt.clearRect(0, 0, canvas.width, canvas.height)
}

function animate() {
erase();
draw();
if(iStop){
cancelRequestAnimationFrame(timer);
}else{
timer = requestAnimationFrame(animate);
}
}

window.Ykload = function(canvas){
cxt = canvas.getContext('2d');

_x = canvas.width/2;
_y = canvas.height/2;
};

window.Ykload.prototype.start = function(){
if(iStop == true) {
iStop = false;
animate();
}
};

window.Ykload.prototype.end = function(){
iStop = true;
};
})(window);

var canvas = document.getElementById('canvas');

var ykload = new Ykload(canvas);

document.getElementById('start').onclick = function(){
ykload.start();
};

document.getElementById('stop').onclick = function(){
ykload.end();
};