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

Question

我想画这样的形状： 如何在 HTML5 画布上画一个模糊的圆圈？ 在我使用 EaselJs 的画布上。我会做一些基本的绘图，我需要模糊的半透明圆圈，在 Easel 中还有其他方法可以实现这一点吗？

如果我尝试在没有画架的情况下处理模糊的圆圈，有什么问题吗？

Answer 1

我无法对 EaselJS 发表评论，但在常规画布中，您可以绘制一个带有红色阴影的红色圆圈 - X 偏移为 0，Y 偏移为 0，模糊约为 25。

Answer 2

您可以设置形状的alpha以获得半透明的圆形。然后使用 BoxBlurFilter 使其变得模糊。所有这些都可以在 Easel JS在线文档中找到，并且在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

绘制轮廓模糊的圆圈，如如何在 HTML5 画布上绘制模糊圆圈？，您需要使用相同的红色但不同的透明度值使用径向渐变填充 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);

为 100px 半径圆的径向渐变填充提供 3 种“停止”颜色（由 2 个数组 [solidRed、solidRed、transparentRed] 和 [0, 0.75, 1] 指定）：中心为纯红色，75 为纯红色半径的 %，以及半径处的透明红色。

渐变将生成一个 75px 的圆形，填充纯红色，并以从 75px 的纯红色到 100px 的完全透明红色的光环为边界。

然后你可以享受调整的乐趣：

• 透明渐变开始的阈值（第二个数组的第二个元素：接近 0 会给你一个更大的模糊轮廓，接近 1 会给你一个更清晰的轮廓）
• EaselJS Shape 的 alpha 值（现在即使是中心的实心圆也将是半透明的）
• 如果您计划有多个圆圈重叠，则 EaselJS 形状的复合操作（“较浅”会将颜色一起添加到白色）。

我使用了这 3 种技术的混合来 使用 EaselJS创建这个图像。