Question

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

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

然而，我无法让圆圈变得模糊。 shadowBlur属性的基本功能是在绘制常规圆后绘制一些模糊效果。到目前为止，我已经尝试了on jsFiddle。

可以看出，它是一个实心的圆形，周围有一些模糊效果 - 这两个部分根本不会相互融合。我真正希望实现的是圆圈本身就像这样完全模糊：

blurred circle

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

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/

Answer 2

您可能可以获取位图像素阵列并在其上应用一些模糊算法。例如：http://www.jhlabs.com/ip/blurring.html

Answer 3

您可能会发现context.filter属性有用

＆＃13;

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

context.filter = "blur(16px)";

context.fillStyle = "#f00";
context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2, true);
context.fill();

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <canvas width=200 height=200 id='canvas'></canvas>
</body>

</html>

＆＃13;

注意截至2017年4月，IE，Opera和Safari不支持此

Answer 4

您可以使用以下功能绘制模糊圆圈：

function drawblurrycircle(context, x, y, radius, blur)
{
     context.shadowBlur = blur;
     context.shadowOffsetX = 0;
     context.shadowOffsetY = 0;

     context.fillStyle="#FF0000";
     context.shadowColor="#FF0000"; //set the shadow colour to that of the fill

     context.beginPath();
     context.arc(x,y,radius,0,Math.PI*2,true);
     context.fill();
     context.stroke();
}

Answer 5

如果您仍然对使用EaselJS看到此效果感兴趣，这可能有助于JSFiddle EaselJS blur

var stage = new createjs.Stage("test");
var s = new createjs.Shape();
var g = s.graphics;
g.f("#FF0000").dc(0, 0, 75);
s.x = 100;
s.y = 100;
s.filters = [new createjs.BoxBlurFilter(5, 5, 3)];
stage.addChild(s);
s.cache(-100, -100, 200, 200);
s.alpha = 0.5;
stage.update();

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

5 个答案: