Question

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

Answer 1

您可以使用CSS来模糊画布。如果它只是你要模糊的形状，那么形状将需要在你自己独立的图层（画布）上，你可以动态创建。

示例：

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

您可以使用：

再次取消模糊画布

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

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

Answer 2

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

或者你可以使用这个Superfast Box Blur进行2次迭代： http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

Answer 3

您链接到的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 4

myContext.filter = 'blur(10px)';

Canvas 2D API的CanvasRenderingContext2D.filter属性提供滤镜效果，例如模糊或灰度。它类似于CSS过滤器属性，并且接受相同的功能。 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

它仍处于试验阶段，但受chrome＆firefox atm支持。

Answer 5

https://github.com/nodeca/glur - 它通过IIR滤镜实现高斯模糊。见演示。

html画布形状模糊滤镜

5 个答案: