運動模糊是指快速運動的物體造成明顯的模糊拖動痕跡；
以簡單的直線運動為例，運動模糊應該具有兩個引數，分別是半徑長度和角度；
比如在sketch中如下：
但是 css、canvas、svg 的濾鏡均不支援運動模糊。
那是不是意味著如果設計師只是對乙個很簡單的圖形使用了sketch中的運動模糊濾鏡，我們在重構時就必須使用來實現呢？
答案並不是。
svg 的高斯模糊濾鏡和 css 以及 canvas 的並不太一樣；
css 和 canvas 高斯模糊濾鏡都只支援乙個引數，但是 svg 中fegaussianblur標籤的stddeviation屬性卻可以有兩個引數，分別表示 x 和 y 軸上的模糊半徑；
另外模擬任意角度的運動模糊效果也是可以的，不過需要進行分層處理，如下：
.layer-reset
.layer-blur
.layer-img
fegaussianblur只能模擬水平或者豎直方向的運動模糊，要想模擬任意角度，就只能對內容進行旋轉變換，然後再在最外層進行反向旋轉變換還原。
在常用濾鏡演算法以及webgl實現中曾簡單介紹過乙個基於 webgl 的濾鏡庫 webglimagefilter；
作者在實現模糊濾鏡也沒考慮過運動模糊；
但是我們可以稍作改動來讓其支援：
主要改動點為：
迭代次數太小會導致模糊半徑較大時出現很明顯的分塊現象，glfx.js 是另外乙個基於 webgl 的濾鏡庫。
左側是sketch中motion blur的濾鏡效果，右側是改動後webglimagefilter的blur濾鏡的效果，除了對邊緣的處理不一樣以外，基本沒啥區別。
關於運動模糊的內容遠不止上邊這些那麼簡單，還有一些很複雜的內容，比如3d場景、其它運動模式等，如果有機會再慢慢折騰吧！
css高斯模糊 CSS躬行記（6） 濾鏡
濾鏡 filter 可改造元素的視覺呈現，css內建的濾鏡有10種，通過svg檔案還能自定義濾鏡。調色濾鏡可控制元素的模糊 顏色 亮度等變化，並且多個濾鏡可組合在一起使用。這些濾鏡大部分既能接收百分數，也能接收數值。當傳入的值大於上限值時，會以上限值來處理。1 模糊 blur 濾鏡會對元素進行高斯模...
高斯模糊 理論
高斯分布函式可表示為乙個一維的函式g x 或者乙個二維的函式g x,y 在這些函式中，x和y代表了相對於原始中心點 center tap 畫素的偏移 pixel offsets 值。也就是說，他們距離中心多少畫素。這裡的center tap，通常翻譯為 中心抽頭 它在電學中的概念是 在整個次級線圈的...
android高斯模糊
高斯模糊演算法介紹 高斯模糊就是將指定畫素變換為其與周邊畫素加權平均後的值，權重就是高斯分布函式計算出來的值。演算法介紹 一 通過自身的寫演算法 public static void gaussblur int data,int width,int height,int radius,float s...