canvas 魔兽技能冷却效果

function init(){var skills = document.getElementById('skills');skills.addEventListener('click',function(e){          if(e.target.tagName.toUpperCase() == 'CANVAS'){            paint.call(e.target);        }    },false);}function paint(){        if(typeof this.getContext != 'undefined'){        if(this.active)            return;        this.active = true;                var context = this.getContext("2d");    var canvasWidth = this.width,        canvasHeight = this.height,        cx = canvasWidth/2,        cy = canvasHeight/2;                            //画一个半透明的灰色背景        context.beginPath();        context.clearRect(0,0,canvasWidth,canvasHeight);        context.moveTo(0,0);        context.fillStyle = 'rgba(0,0,0,.7)';        context.fillRect(0,0,canvasWidth,canvasHeight);        context.fill();                    var speed = 100,            step = Math.PI/90,            start = 3*Math.PI/2,            begin = start,            end = start + step,            len = this.width > this.height ? this.width:this.height,            r = Math.round(0.8*len);        if(this.getAttribute('sec')){            speed = Math.round(50*this.getAttribute('sec')/9);        }                context.beginPath();        context.moveTo(cx, cy);        context.fillStyle = 'rgb(0,0,0)';        context.globalCompositeOperation = "destination-out";        var that = this;        var timer = null;        var doPaint = function(){            context.arc(cx, cy, r, start, end, false);            context.fill();            start = end;            end = end + step;            if(end - begin > 2*Math.PI){                clearTimeout(timer);                context.globalCompositeOperation = "source-over";                that.active = null;                return;            }             else               timer = setTimeout(doPaint,speed);                    }        doPaint();             }}