2012-11-10 30 views

回答

0

我不能EaselJS發表評論,但在常規的畫布,你可以借鑑其中有一個紅色的陰影的紅色圓圈 - 以X爲0偏移,Y爲0偏移和模糊的大致25

+0

或者,使用漸變填充。 – Shmiddty

0

可以設置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); 
0

要繪製圓如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