我可以在 HTML5 画布上绘制一个简单的圆圈，但我想在它周围添加一些模糊效果。
我发现的是这个网站，它解释了shadowBlur可以在这里派上用场的财产。
但是，我无法使圆圈本身变得模糊。该shadowBlur属性的主要作用是在绘制规则圆后绘制一些模糊效果。到目前为止我尝试过的东西我已经穿上了 jsFiddle。
可以看出，它是一个实心圆，周围有一些模糊效果——这两个部分根本不融合在一起。我真正想要实现的是圆圈本身完全模糊，如下所示：
有没有什么办法可以像这样画一个模糊的圆，即圆本身也有模糊效果？
我强烈建议不要使用模糊算法，除非您正在模糊一些已经存在的复杂绘图。
对于您的情况，只需绘制一个具有径向渐变的矩形。
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);
例子：
您可能会发现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 不支持此功能
您可能可以获得位图像素数组并在其上应用一些模糊算法。例如：http : //www.jhlabs.com/ip/blurring.html
您可以使用以下函数绘制一个模糊的圆圈：
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();
}
如果您仍然对使用 EaselJS 完成此效果感兴趣，这可能有助于JSFiddle EaselJS 模糊
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();