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

画像のサイズと位置がわかっている場合は、それらを描画するときに.rectキャンバス方式を使用して画像の周囲に矩形を描くことができます。