*{
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();
}
}
分享到:
相关推荐
CocosCreator实现技能CD效果 在很多游戏里面都有技能,玩家在点击技能按钮后技能会有一个冷却的时间,当冷却时间过了之后技能才可以再次使用 在cocos中实现这个效果很简单,需要用到精灵组件 首先将技能按钮的...
css3实现图片模糊,canvas实现交互设计,简单,简单,简单,简单,简单,简单单
canvas动画-星空效果动画
简单的Canvas刮奖带动画效果的实例,具体效果可以到我的博客查看 http://blog.csdn.net/zhouzme/
canvas粒子跟随效果。canvas粒子跟随效果。canvas粒子跟随效果。
最新canvas实现曲线进度条效果 最新canvas实现曲线进度条效果
HTML5 canvas炫酷拖拽圆球效果,可拖拽、可生成新的小球。
我们使用HTML5的canvas标签可对图片进行旋转操作,对于ie8版本以下不支持HTML5的浏览器,可使用IE特有的滤镜效果来实现... 更详细canvas图片左右旋转效果教程,http://www.sucaihuo.com/js/27.html。你也可以在素材...
简单易用的基于jQuery实现的,结合canvas实现的烟花播放效果
Canvas实现文字云效果,多浏览器支持
html5 canvas画布实现液体波浪动画效果 html5 canvas画布实现液体波浪动画效果
简洁易用的jQuery.clock-canvas基于canvas实现的时钟效果
WPF Canvas 效果 聚光灯效果
3.8_使用离屏Canvas制作放大镜效果|离屏Canvas图像处理|Canvas图形、动画、游戏开发从入门到精通全系列课程
使用canvas实现粒子流动效果示例的源代码,含有非常详细的代码注释。
这是自己做的一个小Demo,实现平行四边形的图片效果。通过canvas和css来实现的。
canvas数字时钟效果
canvas炫酷动画飞爆效果
Canvas 粒子效果文本动画
canvas 3d效果的QT实现,演示了如何使用qt实现canvas3d效果