1

私は半透明の形をしています：

ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
ctx.beginPath();  
ctx.moveTo(0, 150);  
ctx.lineTo(300, 0);  
ctx.lineTo(300, 450);
ctx.lineTo(50, 500);
ctx.closePath();
ctx.fill();

少し影を付けたいのですが、形の外側だけに見せたいので、影よりも輝きの方がいいと思います。私の試みとして、キャンバスでこれを行う方法はありますか？

ctx.shadowBlur    = 5;
ctx.shadowColor   = 'rgba(0, 0, 0, 0.25)';

半透明の形を通して暗い影が見えるので、妖精は普通に見えます。

ありがとう！

4

1 に答える 1

2

これを行う最も簡単な方法は、シェイプの外側のすべてを含むクリッピング領域を作成し、そこにシャドウを描画することだと思います。

ここに反転クリップ領域の作成に関する説明があります：forums.whatwg.org。

基本的に、手順は次のようになります。

ctx.save();  // store initial clip region

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, canvas.width);
ctx.lineTo(canvas.height, canvas.width);
ctx.lineTo(canvas.height, 0);
ctx.lineTo(0, 0);
// {subpath of your shape here}
ctx.clip()

次に、シャドウを有効にして、シェイプを描画します。

最初のクリップ領域を復元します。

ctx.restore()

次に、影なしで、通常どおりに形状を描画します。

于 2010-09-02T10:11:53.807 に答える