在渲染到畫布上之前模糊圖像

Question

我正在試圖爲我在畫布上移動的圖像實現高斯模糊。在將圖像呈現在畫布上之前是否有模糊圖像的方法？

該圖像不會保持靜態，我將不得不渲染同一圖像的多種尺寸，所以我不能模糊源圖像。

任何想法？

Answer 1

你可以很容易地得到預先渲染，所需大小的模糊圖像！

• 創建一個屏幕外的畫布：document.createElement('canvas');

• 繪製所需的多種尺寸的圖像投影到屏幕外的畫布：drawImage with sizing parameters

• 使用模糊程序模糊整個屏幕外的畫布：

  http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

• 使用屏幕外的畫布像spritesheet和「切割」你需要兩種尺寸的圖像，然後剪切圖像屏幕上的畫布：再次使用drawImage with sizing parameters