Canvas编程习题：20几行js代码实现雷达扫描风格的图片切换效果

Canvas编程练习：20几行js代码实现雷达扫描风格的图片切换效果
灵感源于一不小心挖了一个陈年老贴etherdream发的《【分享】魔兽技能冷却效果（希望能有更好的思路）》的坟，看他的代码太长（约200行），于是自己动手写了一个，也就20多行代码，效果也还不错
点这里看DEMO(1)。

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

我写的这一份，我自认为最大优点是代码比较短小。这个也可以用来做照片切换效果
点这里看DEMO(2)

主要代码如下：

HTML code

<canvas id="canvas1" width="400" height="300"></canvas>    <script>//MyCtx是我写的一个通用的类，我自己写些小小的canvas js都用这个当先锋。//把canvas 2d context的一些常用方法封装了一下，以便像jQuery那样作链式调用。//对于最常用的绘制路径的指令，采用了字母缩写。习惯了svg的简洁，也搬迁到canvas来。function MyCtx(ctx){      this.ctx = ctx;  }(function (map){      for(var k in map){          MyCtx.prototype[k] = new Function('this.ctx.'+map[k]+'.apply(this.ctx,arguments); return this;');      }  }({      B:'beginPath', M:'moveTo', L:'lineTo', A:'arc', Z:'closePath', f:'fill', dI:'drawImage', cR:'clearRect', clip:'clip', save:'save', restore:'restore'  }));  function init(){      var ctx = document.getElementById("canvas1").getContext('2d');      var mtx = new MyCtx(ctx), i=-1;      function f(){          //链式调用绘图指令，绘制一个扇形，扇形的角度随时间逐渐变化，这是实现动画效果的关键。        mtx.save().dI(img,0,0).B().A(200,150,250,Math.abs(++i%100)*Math.PI/50,Math.PI*2,(i/100|0)%2).L(200,150).Z().clip().dI(img,-400,0).restore();          setTimeout(f,60);      }      f();  }  var img = new Image();  img.src = 'p1.jpg';  img.onload = init();  </script> 

 

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



[解决办法]
这个可以有。。。
[解决办法]
楼主厉害
[解决办法]
楼主说你的代码20多行有点牵强吧，不过确实写得不错，呵呵。
[解决办法]
另外，代码有点小错误。
img.onload = init；而不是img.onload = init();
[解决办法]
最近我也在研究canvas画布的东东，向楼主学习了。。。

查看更多 下一篇