canvas 魔兽技能冷却效果

*{
	margin:0px;
	padding:0px;
}

#skills ul,#skills li{
	list-style-type:none;
	margin:0px;
	padding:0px;
}

#skills li{
	float:left;
	margin-left:5px;
	position:relative;
}
#skills canvas.skill{
	float:left;
		position:absolute;
	top:0px;
	left:0px;
	cursor:pointer;
	overflow:hidden;
}

<div id="skills">
<ul>
	<li><img src="/img/skillImg/Ability_DualWield.jpg" width=64 height=64 />
		<canvas class="skill" width=64 height=64 ></canvas>
	</li>
	<li><img src="/img/skillImg/Ability_Ensnare.jpg" width=64 height=64 />
		<canvas class="skill" width=64 height=64 ></canvas>
	</li>
	<li><img src="/img/skillImg/Ability_Defend.jpg" width=64 height=64 />
		<canvas class="skill" width=64 height=64 ></canvas>
	</li>
</ul>
</div>

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();

     }
}