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

[cuixiping]

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

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

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

主要代码如下：

<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)
截图：

[001007009]

这个可以有。。。

[hch126163]

楼主厉害

[峭沙]

楼主说你的代码20多行有点牵强吧，不过确实写得不错，呵呵。

[峭沙]

另外，代码有点小错误。
img.onload = init；而不是img.onload = init();

[cuixiping]

[Quote=引用 4 楼 的回复:]

另外，代码有点小错误。
img.onload = init；而不是img.onload = init();
[/Quote]
是的，谢谢指出。

[it491328322]

最近我也在研究canvas画布的东东，向楼主学习了。。。

[cuixiping]

上面的网址无效了。

新的网址：
Demo 1
Demo 2

截图