我想繪製像這樣的形狀: How to draw a blurry circle on HTML5 canvas? 我在畫布上使用EaselJs。我會做一些基本的繪畫,並且我需要模糊的半透明圓圈,在Easel中有沒有其他方法可以實現這一點?用EaselJS繪製模糊的半透明圓
如果我嘗試處理沒有畫架的模糊圈子,有什麼不對嗎?
我想繪製像這樣的形狀: How to draw a blurry circle on HTML5 canvas? 我在畫布上使用EaselJs。我會做一些基本的繪畫,並且我需要模糊的半透明圓圈,在Easel中有沒有其他方法可以實現這一點?用EaselJS繪製模糊的半透明圓
如果我嘗試處理沒有畫架的模糊圈子,有什麼不對嗎?
我不能EaselJS發表評論,但在常規的畫布,你可以借鑑其中有一個紅色的陰影的紅色圓圈 - 以X爲0偏移,Y爲0偏移和模糊的大致25
可以設置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);
要繪製圓如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像素處的完全透明紅色。
然後就可以有樂趣調整:
我用的這3個技術組合,以與EaselJS創建此 image。
或者,使用漸變填充。 – Shmiddty