Canvas编程习题:20几行js代码实现雷达扫描风格的图片切换效果
Canvas编程练习:20几行js代码实现雷达扫描风格的图片切换效果
灵感源于一不小心挖了一个陈年老贴etherdream发的《【分享】魔兽技能冷却效果(希望能有更好的思路)》的坟,看他的代码太长(约200行),于是自己动手写了一个,也就20多行代码,效果也还不错
点这里看DEMO(1)。
etherdream的原理是使用borderWidth的动态改变,可兼容非HTML5浏览器,缺点是代码较多,需要新增DOM节点,而且只能用纯色遮罩,不能实现用图片做遮罩。
我写的这一份,我自认为最大优点是代码比较短小。这个也可以用来做照片切换效果
点这里看DEMO(2)
主要代码如下:
原理:先绘制一个底图,再绘制一个扇形的剪切区域,绘制上层的图到该剪切区域,剪切区内显示上层的图,剪切区外显示底图。
关键是arc()和clip()指令的使用。
点这里看DEMO(2)
截图:
------解决方案--------------------
这个可以有。。。
------解决方案--------------------
楼主厉害
------解决方案--------------------
楼主说你的代码20多行有点牵强吧,不过确实写得不错,呵呵。
------解决方案--------------------
另外,代码有点小错误。
img.onload = init;而不是img.onload = init();
------解决方案--------------------
最近我也在研究canvas画布的东东,向楼主学习了。。。
灵感源于一不小心挖了一个陈年老贴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画布的东东,向楼主学习了。。。