html画布形状模糊滤镜

Question

必须有办法做到这一点。我用html5画布画了一个形状，我想模糊它。据我所知，没有本地方法，所以我假设需要一个js库。问题是大多数图书馆只模糊图像，例如this。这可能吗？

Answer 1

您链接的pixastic库示例实际上应该使用canvas元素作为第一个参数而不是图像。

默认情况下，pixastic库会尝试用您创建的canvas元素替换您传入的节点。为了防止这样做，您可以添加一个选项来指定离开DOM节点，并包含一个回调以自己处理返回的数据。事情是这样的：

Pixastic.process(canvas, "blur", { leaveDOM: true }, function(img) { 
    canvas.getContext('2d').drawImage(img, 0, 0); 
}); 

另外，如果你不希望依赖于库，可以实现自己使用getImageData（）模糊，操纵返回的像素数据，并使用putImageData（）来绘制模糊图像回到画布。

另外需要注意的是，单个像素操作速度较慢，可能无法很好地处理大图像。如果这是一个问题，您可以尝试缩小图像并缩小图像，以便快速完成模糊效果。事情是这样的：

ctx.drawImage(canvas, 0, 0, canvas.width/2, canvas.height/2); 
ctx.drawImage(canvas, 0, 0, canvas.width/2, canvas.height/2, 0, 0, canvas.width, canvas.height);

Answer 2

对于一个快速模糊，这几乎是高斯我建议StackBlur： http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

另外，您可以使用此超快方框模糊与2次迭代： http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

Answer 3

你可以使用CSS来模糊画布。如果它只是你想要模糊的形状，那么这个形状将需要位于它自己单独的图层（画布）上，您可以随时创建它。

例子：

canvas.style.webkitFilter = "blur(3px)"; 

您可以再次与联合国模糊的帆布：

canvas.style.webkitFilter = "blur(0px)"; 

这可能是最快的（也是最简单）的方式模糊的画布 - 特别是对于移动设备。

Answer 4

https://github.com/nodeca/glur - 通过IIR滤波器实现高斯模糊。查看演示。