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

Question

シャドウONCEを定義した場合、キャンバス上のすべての「グラフィックス」（後で説明します）から適用されます。

サンプル： http://flanvas.com/development/flanvas/test.html

誰もがあなたがそれを使用した後の影をオフにするベストプラクティスを知っていますか？ shadowColorを "rgba（0,0,0,0）"に設定していますが、これはアルファベットではありません。私は良い方法があると確信しています。

ケース・サンプル：テキストも影になっています。私は今、これと戦うためにアルファ・ブラックを使用しています。 http://flanvas.com/development/flanvas/examples/filters-dropShadowFilter.html

Answer 1

、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)

Answer 2

それはあなたがそれを変更し、後でそれを復元するには、この格納された値を使用する前に、「グローバル」のこれらの種類の古い値は、属性を格納するために通常は良いでしょう。例：saveを使用することにより

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

// ... do some stuff 

ctx.shadowColor = origShadowColor; 

Answer 3

をプロットしたものであるとして、この方法は、キャッシングの問題を解決し、以前のスタイル/値を復元し、グラデーションで作業する際にも非常に便利です

（EDIT：！おっと、私は見ることの。

context.shadowColor = "transparent";