提醒：本文最後更新於 1613 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

使用閱讀器的同學請點選此處檢視本文！

又有很長一段時間沒更新部落格。倒不是因為沒啥可寫，而是最近做的一些研究要麼跟公司專案密切相關；要麼不是三言兩語能說清楚，所以更多時候直接就內部分享了。

後續我會盡量找一些跟業務沒直接關係的內容更新上來。當然你也可以選擇加入我所在的團隊，一起做一些有意義的東西^_^

今天給大家分享的是最近做的一個小東西的區域性：利用少量 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. 原始碼：初始版、改進版；

最後，放一個支援編輯的版本供大家娛樂下（左右兩位是我現任老大，中間是大牛前輩），手機使用者請點開這個連結。（附送福利、向蛋黃前輩致敬）

--EOF--

提醒：本文最後更新於 1613 天前，文中所描述的資訊可能已發生改變，請謹慎使用。