在渲染到画布上之前模糊图像

Question

我正在试图为我在画布上移动的图像实现高斯模糊。在将图像呈现在画布上之前是否有模糊图像的方法？

该图像不会保持静态，我将不得不渲染同一图像的多种尺寸，所以我不能模糊源图像。

任何想法？

Answer 1

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

• 创建一个屏幕外的画布：document.createElement('canvas');

• 绘制所需的多种尺寸的图像投影到屏幕外的画布：drawImage with sizing parameters

• 使用模糊程序模糊整个屏幕外的画布：

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

• 使用屏幕外的画布像spritesheet和“切割”你需要两种尺寸的图像，然后剪切图像屏幕上的画布：再次使用drawImage with sizing parameters