javascript - HTML5キャンバス上の画像に動的に境界線を追加する

Question

画像を含むキャンバスがあります。落下の効果を出すために、毎回1ピクセル下に再描画しています。画像を配列に入れて、画像を再作成せずに1ピクセル下に配置します。

特定のポイントに到達する画像に動的に境界線を追加することは可能ですか？その場合、どのようにですか？

Answer 1

はい、あなたがしなければならないのは、画像の外側にパスを描きctx.stroke()、境界線を作るために呼び出すことだけです。

つまり、画像に座標xとyがあり、幅と高さがwとであるとするとh、次のようになります。

ctx.rect(x, y, w, h);
ctx.stroke();

別の色の境界線が必要ですか？

ctx.strokeStyle = 'blue';

厚い？

ctx.lineWidth = 5;

Answer 2

画像のサイズと場所がわかっていて、描画するときにおそらくそうしている場合は、.rectcanvasメソッドを使用して画像の周囲に長方形を描画できます。