Canvas编程练习:20几行js代码实现雷达扫描动画效果
2012-05-14 17:33
696 查看
灵感源于一不小心挖了一个陈年老贴etherdream发的《【分享】魔兽技能冷却效果(希望能有更好的思路)》的坟,看他的代码太长(约200行),于是自己动手写了一个,也就20多行代码,效果也还不错,点这里看DEMO(1)。
etherdream的原理是使用borderWidth的动态改变,可兼容非HTML5浏览器,缺点是代码较多,需要新增DOM节点,而且只能用纯色遮罩,不能实现用图片做遮罩。
也可以用来做照片切换效果,点这里看DEMO(2)
原理:先绘制一个底图,再绘制一个扇形的剪切区域,绘制上层的图到该剪切区域,剪切区内显示上层的图,剪切区外显示底图。
关键是arc()和clip()指令的使用。
点这里看DEMO(2)
截图:
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)
截图:
相关文章推荐
- Android编程简单实现雷达扫描效果
- canvas实现"雷达扫描"效果
- Android 雷达扫描动画效果实现
- 【canvas系列】canvas实现"雷达扫描"效果
- 用canvas实现红心飘飘的动画效果
- Android编程实现RotateAnimation设置中心点旋转动画效果
- 【Android】实现雷达扫描效果
- Android仿微信雷达扫描效果的实现方法
- vb实现雷达扫描效果
- 使用JavaScript和Canvas实现下雪动画效果
- HTML5 Canvas动画效果实现原理
- JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
- HTML5利用Canvas模拟上下扫描动画实现
- 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活
- HTML5 Canvas动画效果实现原理
- vb实现雷达扫描效果
- Android编程实现仿心跳动画效果的方法
- [置顶] HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- HTML5 Canvas动画效果实现原理
- Android自定义View实现雷达扫描动画