html画布形状模糊过滤器 [英] html canvas shape blur filter

问题描述

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

解决方案

您可以使用CSS模糊画布。如果它只是你想要模糊的形状，那么形状将需要在自己的单独的图层（画布），你可以在飞行中创建。

示例：

  canvas.style.webkitFilter =blur（3px）; 
  

您可以通过以下方式取消模糊画布：

  canvas.style.webkitFilter =blur（0px）; 
  

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

There must be a way to do this. I have drawn a shape with the html5 canvas and I would like to blur it. As far as I know there is no native method so I assume a js library is needed. The problem is most libraries only blur images like this one for example. Is this possible?

解决方案

you can use CSS to blur the canvas. If it's just the shape you want to blur then the shape will need to be on its own separate layer (canvas), which you could create on the fly.

Example:

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

You can un-blur the canvas again with:

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

This is probably the fastest (and simplest) way to blur a canvas - especially for mobile devices.

这篇关于html画布形状模糊过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！