用EaselJS绘制模糊的半透明圆

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

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

来源

2012-11-10 ewooycom

我不能EaselJS发表评论，但在常规的画布，你可以借鉴其中有一个红色的阴影的红色圆圈 - 以X为0偏移，Y为0偏移和模糊的大致25

来源

2012-11-10 20:01:08 Richard

或者，使用渐变填充。 – Shmiddty

可以设置alpha的形状得到一个半透明的圆形。然后使用BoxBlurFilter使其模糊。所有的这是画架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);

来源

2012-11-21 07:52:48

要绘制圆如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％时为红色，半径为红色。

该渐变将生成一个75像素的圆圈，其中填充了纯红色，边界由光环从75像素处的纯红色到100像素处的完全透明红色。

然后就可以有乐趣调整：

该阈值在该透明梯度开始时的第二阵列的（第二元件：越接近0给你一个较大的模糊轮廓，越接近1给出你更清晰的轮廓）
您EaselJS形状的阿尔法值（现在连中央的实心圆也将是半透明的）
如果您计划拥有多个圆您EaselJS的compositeOperation形状重叠（”打火机'将把颜色加在一起ds白色）。

我用的这3个技术组合，以与EaselJS创建此 image。

来源

2016-02-11 20:18:50 user645385

用EaselJS绘制模糊的半透明圆

回答

相关问题