用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繪製模糊的半透明圓

回答

相關問題