❗ 本文最后更新于 3785 天前，文中所描述的信息可能已发生改变，请谨慎使用。

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

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

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

今天给大家分享的是最近做的一个小东西的局部：利用少量 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. 源码：初始版、改进版；

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

本文链接：https://mailseason.com/post/shake-photo-in-little-js.html，参与评论 »

--EOF--

发表于 2014-08-11 16:20:07，并被添加「Canvas、JavaScript」标签。查看本文 Markdown 版本 »

本站使用「署名 4.0 国际」创作共享协议，相关说明 »