js实现雷达扫描效果

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

 

也可以用来做照片切换效果，点这里看DEMO

1. <canvas id="canvas1" width="400" height="300"></canvas> 
3. <script> 
4. //MyCtx是我写的一个通用的类，我自己写些小小的canvas js都用这个当先锋。 
5. //把canvas 2d context的一些常用方法封装了一下，以便像jQuery那样作链式调用。 
6. //对于最常用的绘制路径的指令，采用了字母缩写。习惯了svg的简洁，也搬迁到canvas来。 
7. function MyCtx(ctx){ 
8. this.ctx = ctx; 
9. } 
10. (function (map){ 
11. for(var k in map){ 
12. MyCtx.prototype[k] = new Function('this.ctx.'+map[k]+'.apply(this.ctx,arguments); return this;'); 
13. } 
14. }({ 
15. B:'beginPath', M:'moveTo', L:'lineTo', A:'arc', Z:'closePath', f:'fill', dI:'drawImage', cR:'clearRect', clip:'clip', save:'save', restore:'restore' 
16. })); 
17. function init(){ 
18. var ctx = document.getElementById("canvas1").getContext('2d'); 
19. var mtx = new MyCtx(ctx), i=-1; 
20. function f(){ 
21. //链式调用绘图指令，绘制一个扇形，扇形的角度随时间逐渐变化，这是实现动画效果的关键。 
22. 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(); 
23. setTimeout(f,60); 
24. } 
25. f(); 
26. } 
27. var img = new Image(); 
28. img.src = 'p1.jpg'; 
29. img.onload = init; 
30. </script>

复制代码

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