javascript - 如何在 HTML5 canvas 上画一个模糊的圆圈？

Question

我可以在 HTML5 Canvas 上绘制一个简单的圆圈，但我想在它周围添加一些模糊。

我找到的是 this website这解释了可以在这里派上用场的 shadowBlur 属性。

但是，我无法使圆圈本身变得模糊。 shadowBlur 属性的主要作用是在绘制规则圆之后绘制一些模糊效果。到目前为止我试过的是on jsFiddle .

可以看出，它是一个实心圆圈，周围有一些模糊效果 - 两个部分根本没有相互融合。我实际上想要实现的是圆圈本身完全模糊，如下所示:

有没有办法画出这样一个模糊的圆圈，即圆圈本身也有模糊的效果？

Answer 1

我强烈建议不要使用模糊算法，除非您要模糊一些已经存在的复杂绘图。

对于您的情况，只需绘制一个具有径向渐变的矩形。

  var radgrad = ctx.createRadialGradient(60,60,0,60,60,60);
  radgrad.addColorStop(0, 'rgba(255,0,0,1)');
  radgrad.addColorStop(0.8, 'rgba(228,0,0,.9)');
  radgrad.addColorStop(1, 'rgba(228,0,0,0)');

  // draw shape
  ctx.fillStyle = radgrad;
  ctx.fillRect(0,0,150,150);

例子:

http://jsfiddle.net/r8Kqy/48/