2

我正在尝试为我在画布上移动的图像实现高斯模糊。有没有办法在将图像渲染到画布上之前对其进行模糊处理？

该图像不会保持静态，我将不得不渲染同一图像的多个尺寸，因此我不能只是模糊源图像。

有任何想法吗？

4

1 回答 1

2

您可以很容易地获得所需尺寸的预渲染模糊图像！

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

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

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

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

  • 像 spritesheet 一样使用屏幕外画布并“剪切”您需要的任何大小的图像，然后将剪切后的图像绘制到屏幕画布上：再次使用drawImage with sizing parameters

于 2014-09-24T01:04:05.367 回答