javascript - HTML5 キャンバス: 外側の影のみ

Question

キャンバスに四角形を描画し、影を有効にすると、内側と外側の影も作成されますが、外側の影だけが必要です。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.shadowColor = 'black';
ctx.shadowBlur = 5;

ctx.strokeRect(20,30,150,75);

私が見つけた唯一の方法はctx.clearRect(20,30,150,75);. しかし、直腸の下に何かがある可能性があり、それを削除したくないので、それは私が本当に望んでいるものではありません.

前もって感謝します、

score 4 · Accepted Answer

長方形内のピクセルを取得し、ペイントを実行して、それらのピクセルを元に戻すことができます。そうすれば、長方形内のピクセルは変更されません: http://jsfiddle.net/dkAKE/。

var imgdata = ctx.getImageData(20, 30, 150, 75);
ctx.strokeRect(20, 30, 150, 75);
ctx.putImageData(imgdata, 20, 30);

境界線を保持するには(21, 31, 148, 73)、領域として使用します (ストローク幅 1px を想定)。

score 1 · Accepted Answer

.fillRect()の代わりに使用することもできます.strokeRect()。これにより、定義した内側の色を持つ塗りつぶされた長方形が作成されます.fillStyle()

ctx.shadowColor = 'black';
ctx.fillStyle = 'white';
ctx.shadowBlur = 5;
ctx.fillRect(20,30,150,75);

四角形の下にあるものを上書きするという問題がまだあるので、その問題を解決するには pimvdb のソリューションが必要です。

2 に答える 2