html画布形状模糊滤镜

Question

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

Answer 1

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

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

它仍然是实验性的，但受到 chrome 和 firefox atm 的支持。

Answer 2

你可以用CSS来模糊画布.如果它只是你想要模糊的形状,那么形状将需要在它自己独立的图层(画布)上,你可以动态创建.

例:

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

您可以使用以下命令再次取消模糊画布:

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

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

Answer 3

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

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

Answer 4

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

默认情况下，pixastic 库将尝试用它创建的画布元素替换您传入的节点。为了防止它这样做，您可以包含一个选项来指定离开 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);