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

【问题标题】：Drawing blurry semi transparent circles with EaselJS用 EaselJS 绘制模糊的半透明圆圈
【发布时间】：2012-10-30 17:45:59
【问题描述】：

我想画这样的形状： How to draw a blurry circle on HTML5 canvas? 在我使用 EaselJs 的画布上。我会做一些基本的绘图，我需要模糊的半透明圆圈，在 Easel 中还有其他方法可以实现吗？

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

【问题讨论】：

标签： javascript html5-canvas easeljs

【解决方案1】：

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

【讨论】：

【解决方案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);

【讨论】：

【解决方案3】：

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

这里是sn-p的代码：

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% 处为红色，半径处为透明红色。

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

然后你就可以愉快地调整了：

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

我混合使用了这 3 种技术来创建这个 image 与 EaselJS。

【讨论】：