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> <ul> <li><img src="/img/skillImg/Ability_DualWield.jpg" width=64 height=64 /> <canvas width=64 height=64 ></canvas> </li> <li><img src="/img/skillImg/Ability_Ensnare.jpg" width=64 height=64 /> <canvas width=64 height=64 ></canvas> </li> <li><img src="/img/skillImg/Ability_Defend.jpg" width=64 height=64 /> <canvas 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(); } }