html - すべてに適用されているhtmlキャンバスの影

Question

一度影を定義すると、それ以降はキャンバス上のすべての「グラフィック」に適用されます（これが本来の動作です）。

使用後にシャドウをオフにするベストプラクティスを知っている人はいますか? shadowColor をアルファなしの黒である "rgba(0,0,0,0)" に設定しています。もっと良い方法があると確信しています。

ケースサンプル: テキストも影になっています。今のところ、これに対抗するためにアルファなしの黒を使用しています。 http://flanvas.com/development/flanvas/examples/filters-dropShadowFilter.html

score 33 · Accepted Answer

を使用するsaveとtranslate、restoreスタイルの変更を気にせずにタスクを実行できます。

ctx.save();
ctx.translate(X,Y);

ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';

// do some stuff

ctx.restore();

ここX&Yは、描画しようとした座標であり、座標に対して相対的に作業を行います0,0。

この方法は、以前のスタイル/値のキャッシュと復元の問題を解決し、グラデーションは常に原点に対してプロットされるため、グラデーションを使用する場合にも非常に役立ちます。(0,0)

score 10 · Accepted Answer

（編集：おっと！それはあなたがすでに0アルファブラックで行っていたことだと思います。）

これはあなたが探していたものです：

context.shadowColor = "transparent";

score 6 · Accepted Answer

通常、これらの種類の「グローバル」属性の古い値を変更する前に保存し、この保存された値を使用して後で復元することをお勧めします。例：

var origShadowColor = ctx.shadowColor;
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';

// ... do some stuff

ctx.shadowColor = origShadowColor;

score 0 · Accepted Answer

必要に応じてシャドウをリセットするために呼び出すことができる関数を作成しました。

resetShadow() {
    this.ctx.shadowOffsetX = 0;
    this.ctx.shadowOffsetY = 0;
    this.ctx.shadowColor = "transparent";
}

4 に答える 4