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 Shape，但使用相同的红色但不同的透明度值。关键是通过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＆＃34;停止＆＃34;颜色提供给100px半径圆的径向渐变填充（由2个阵列[solidRed，solidRed，transparentRed]和[0,0.75,1]指定）：中心为纯红色，半径为75％时为纯红色，半径为透明红色。

渐变会产生一个75px的圆圈，上面填充纯红色，边缘是一个光环，从75px的纯红色到100px的完全透明的红色。

然后你可以调整乐趣：

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

我使用了这三种技术的混合来创造这个 image与EaselJS合作。

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

3 个答案: