如何在 HTML5 画布上绘制模糊的圆圈？

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

我发现的是这个网站 http://flashcanvas.net/examples/uupaa-js-spinoff.googlecode.com/svn/trunk/uuCanvas.js/demo/9_1_canvas_text_shadow_direction.html这解释了shadowBlur在这里可以派上用场的财产。

但是，我无法使圆圈本身变得模糊。什么是shadowBlur属性基本上是在绘制规则圆之后绘制一些模糊效果。到目前为止我已经尝试过的内容在 jsFiddle 上 http://jsfiddle.net/r8Kqy/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);

Example:

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