1.5kb 代码让图片抖起来

使用阅读器的同学请点击此处查看本文！

又有很长一段时间没更新博客。倒不是因为没啥可写，而是最近做的一些研究要么跟公司项目密切相关；要么不是三言两语能说清楚，所以更多时候直接就内部分享了。

后续我会尽量找一些跟业务没直接关系的内容更新上来。当然你也可以选择加入我所在的团队，一起做一些有意义的东西^_^

今天给大家分享的是最近做的一个小东西的局部：利用少量 js 代码让图片抖动起来。原理很简单：利用 Canvas Context 的 getImageData 和 putImageData 两个方法来获取/更新画布上每一个像素；抖动是利用椭圆圆心偏移和映射实现的。你可以想象先把椭圆的圆心挪个位置，再把椭圆原来每条半 径上每一个点都映射到新半径上就可以了。

整个代码 gzip 后不超过 1.5kb，而且不依赖于任何 js 库（Chrome、Firefox、最新的 IE 都可以运行）。

如果小猫不动了就刷新下页面。 这个 demo 加了运动衰减系数，过会儿就停了~

关于这个 demo，我想多说几句：

1. Canvas 在移动设备上的性能真是弱爆了。一开始这个 demo 在大部分手机上 FPS 超不过 10，后来@月影大牛把核心算法由代数运算改成了向量运算，才能在大部分手机上流畅运行；
2. 学好数学很重要，原因见 1；
3. Web Worker 和 WebGL 两者在移动端上的糟糕支持度，暂时是想都不用想了；
4. 在 iOS 的 webview 中，这个 demo 非常卡。这是因为 Apple 之前不把比较好的 JS 引擎给第三方用，当然 iOS8 开始就没这个问题了。换句话说，对于 iOS8-，任何第三方浏览器都不如系统自带 Safari；
5. 源码：初始版、改进版；

最后，放一个支持编辑的版本供大家娱乐下（左右两位是我现任老大，中间是大牛前辈），手机用户请点开这个链接。（附送福利、向蛋黄前辈致敬）

编辑

取消

添加

删除

玩耍

专题「好玩的 HTML5」的其他文章 »

• 利用图片传输数据的另类思路 (Mar 10, 2016)
• 像素化你的代码 (Sep 19, 2015)
• HTML5 视频直播（三） (May 01, 2015)
• HTML5 视频直播（二） (Apr 25, 2015)
• HTML5 视频直播（一） (Apr 24, 2015)
• [彩蛋]这是什么？ (Dec 13, 2012)