HTML5 Canvas運動模糊效果？

我正在嘗試使用HTML5畫布製作一些運動模糊效果，但沒有成功。HTML5 Canvas運動模糊效果？

基本上我想要做的就是拍一張照片，讓它看起來像「快速轉發」，就像當你拍一張照片和這個人移動一樣。

這個問題不是特定於畫布。您正在尋找的是一種像素操作算法，可創建運動模糊效果。 – korona

可能的重複：http：//stackoverflow.com/questions/9638763/how-to-apply-a-motion-blur-in-javascript-jquery –

有幾個庫的canvas實現了各種模糊算法。 EaselJS已經獨立實現了x軸和y軸的模糊效果，你可以看到in this sample.

所有你可能想要的是從它們的libray中獲得一個x軸模糊。

2012-09-08 03:47:09

我在這裏遇到了相反的問題。縮放圖像時，我試圖擺脫模糊。幸運的是，我的問題導致您的問題的簡單解決方案。此外，由API執行繁重的工作，因此效率很高。

如果您將圖像繪製到較小分辨率的畫布上，然後將其放大，您將會看到模糊的圖像。我已經在很多瀏覽器中嘗試了這一點，而且它似乎也有同樣的功能。 This question探討何時和爲什麼瀏覽器會使用這種模糊行爲，如果你擔心這種技術在瀏覽器和未來版本中的一致性。

canvas.drawImage的image參數接受另一個畫布。當您將圖像繪製到中間畫布時，您可以嘗試沿着一個軸使用較小的分辨率。然後，縮放到原始大小，模糊效果應該主要沿着一個軸。

我不是一個圖像專家，所以我不知道如何最佳地使用運動模糊（無論它應該沿着一個座標軸等），但是通過一些擺弄和研究，您可能可以使用這種技術來得到你想要的效果。

希望這會有幫助

2013-02-25 20:51:52 derekmc

回答