0

このような形を描きたい: HTML5 キャンバスにぼやけた円を描くには? EaselJsを使用しているキャンバス上。基本的な描画を行いますが、ぼやけた半透明の円が必要です。イーゼルでこれを実現する他の方法はありますか?

イーゼルなしでぼやけた円を処理しようとすると、何か問題がありますか?

4

3 に答える 3

0

EaselJSについてコメントすることはできませんが、通常のキャンバスでは、赤い影のある赤い円を描くことができます。Xオフセットは0、Yオフセットは0、ぼかしは約25です。

于 2012-11-10T20:01:08.213 に答える
0

シェイプのアルファを設定して、半透明の円を取得できます。次に、BoxBlurFilter を使用してぼやけさせます。これらはすべて Easel JSオンライン ドキュメントで入手でき、例は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-21T07:52:48.310 に答える
0

How to draw a blurry circle on HTML5 canvas? に示すように、ぼやけた輪郭で円を描くには? の場合、EaselJS Shape を放射状グラデーションで塗りつぶす必要があります。このとき、同じ赤色を使用し、透明度の値を変化させます。重要なのは、rgba() 関数を介して色を指定することです。これにより、アルファ チャネル (不透明度または透明度) を設定できます。

コード スニペットは次のとおりです。

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 つの「ストップ」カラーが、半径 100 ピクセルの円の放射状グラデーション塗りつぶしに提供されます (2 つの配列 [ solidRed、solidRed、transparentRed ] および [ 0, 0.75, 1 ] で指定): 中心が赤一色、75 が赤一色半径の %、および半径で透明な赤。

グラデーションは、75px の純赤から 100px の完全に透明な赤までのハローで囲まれた、純赤で塗りつぶされた 75px の円を生成します。

次に、調整を楽しむことができます。

  • 透明なグラデーションが始まるしきい値 (2 番目の配列の 2 番目の要素: 0 に近いほどぼやけた輪郭が大きくなり、1 に近づくほど輪郭がシャープになります)
  • EaselJS Shape のアルファ値 (中心の塗りつぶされた円も半透明になります)
  • 複数の円を重ねる予定の場合は、EaselJS Shape の compositeOperation ('lighter' は白に向かって色を追加します)。

これら 3 つの手法を組み合わせて 、EaselJS でこの画像を作成しました。

于 2016-02-11T20:18:50.680 に答える