*{
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();
}
}