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