我可以在 HTML5 画布上绘制一个简单的圆圈，但我想在它周围添加一些模糊。
我找到的是this website，它解释了可以在这里派上用场的shadowBlur 属性。
但是，我无法使圆圈本身变得模糊。 shadowBlur 属性的作用基本上是在绘制规则圆之后绘制一些模糊效果。到目前为止，我已经尝试了on jsFiddle。
可以看出，它是一个实心圆，周围有一些模糊效果——这两个部分根本没有相互融合。我实际上想要实现的是圆圈本身完全模糊，如下所示：
有没有办法像这样画一个模糊的圆圈，即圆圈本身也有模糊效果？
【问题讨论】：
标签： javascript html canvas geometry blur
您可能会发现context.filter 属性很有用
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();<!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>请注意，截至 2017 年 4 月，IE、Opera 和 Safari 不支持此功能
【讨论】：
如果您仍然对使用 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();
【讨论】：
您可以使用以下函数绘制一个模糊的圆圈：
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();
}
【讨论】：
shadowBlur 的帖子，问题是阴影没有融入cicle。不幸的是，您的解决方案也遇到了同样的问题。 jsfiddle.net/r8Kqy/410
for 循环多次模糊它
我强烈建议不要使用模糊算法，除非您要模糊一些已经存在的复杂绘图。
对于您的情况，只需绘制一个带有径向渐变的矩形。
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://www.jhlabs.com/ip/blurring.html
【讨论】：
drawImage() 将结果blit 到您的画布上。