Canvas编程练习:20几行js代码实现雷达扫描动画效果

灵感源于一不小心挖了一个陈年老贴etherdream发的《【分享】魔兽技能冷却效果(希望能有更好的思路)》的坟,看他的代码太长(约200行),于是自己动手写了一个,也就20多行代码,效果也还不错,点这里看DEMO(1)。

etherdream的原理是使用borderWidth的动态改变,可兼容非HTML5浏览器,缺点是代码较多,需要新增DOM节点,而且只能用纯色遮罩,不能实现用图片做遮罩。

也可以用来做照片切换效果,点这里看DEMO(2)

  
  
 

原理:先绘制一个底图,再绘制一个扇形的剪切区域,绘制上层的图到该剪切区域,剪切区内显示上层的图,剪切区外显示底图。
关键是arc()和clip()指令的使用。
点这里看DEMO(2)

截图:
Canvas编程练习:20几行js代码实现雷达扫描动画效果_第1张图片


你可能感兴趣的:(JS/DHTML/CSS)