使用EaselJS绘制模糊的半透明圆圈

Question

我想画这样的形状：画布上的How to draw a blurry circle on HTML5 canvas?，我正在使用EaselJs。我会做一些基本的绘图，我需要模糊的半透明圆圈，是否有任何其他方式在画架中实现这一目标？

如果我试图处理没有画架的模糊圆圈，有什么不对吗？

Answer 1

我无法评论EaselJS，但在普通画布上你可以绘制一个红色圆圈，它有一个红色阴影 - X偏移为0，Y偏移为0，模糊大约为25。

Answer 2

您可以设置形状的alpha以获得半透明圆。然后使用BoxBlurFilter使其模糊..所有这些都可以在Easel JS online documentation中找到，并且示例存在于GitHUB中 例如，你可以做一个半透明的圆圈

var shape = new createjs.Shape();
var g = shape.graphics;
g.beginFill("#FFFFFF");
g.drawCircle(0,0,10);
g.endFill();
shape.alpha = 0.5;
stage.addChild(shape);

Answer 3

要绘制一个模糊轮廓的圆，如How to draw a blurry circle on HTML5 canvas?所示，您需要使用相同的红色但不同的透明度值填充径向渐变的EaselJS形状。关键是通过rgba（）函数指定颜色，可以设置alpha通道（不透明度或透明度）。

这是代码片段：

var circle = new createjs.Shape();

var solidRed = 'rgba(255, 0, 0, 1)';
var transparentRed = 'rgba(255, 0, 0, 0)';

circle.graphics.beginRadialGradientFill(
                  [ solidRed, solidRed, transparentRed ],
                  [ 0, 0.75, 1 ],
                  0, 0, 0,
                  0, 0, 100)
                .drawCircle(0, 0, 100);

3个“停止”颜色提供给100px半径圆的径向渐变填充（由2个阵列[solidRed，solidRed，transparentRed]和[0,0.75,1]指定）：中心为红色，75为实心红色半径的百分比，半径的透明红色。

渐变将产生一个75px的圆圈，其中填充有纯红色，边界为一个光环，从75px的纯红色到100px的完全透明的红色。

然后你可以调整乐趣：

• 透明渐变开始的阈值（第二个数组的第二个元素：更接近0会为您提供更大的模糊轮廓，更接近1会为您提供更清晰的轮廓）
• 您的EaselJS形状的Alpha值（现在即使是中心的实心圆也将是半透明的）
• 如果你打算让多个圆圈重叠，那么你的EaselJS Shape的复合操作（'更轻'会将颜色一起添加到白色）。

我已经使用这三种技术的混合来用EaselJS创建这个image。