2

キャンバスに画像を描画しようとしています。キャンバスを html で定義し、JS を使用してサイズを変更しました。

var can = document.getElementById('myCanvas');
can.style.width = (window.innerWidth-20) + "px";
can.style.height = "860px";
var context=can.getContext("2d");
var img=document.getElementById("boje");
context.drawImage(img,50,0,400,140);

drawImage関数を使用すると、位置とサイズのプロパティの座標がサイズ変更されたキャンバスに当てはまりません(たとえば、画像のサイズが大きくなります)。たとえば、JS のサイズを変更する前に html でキャンバスの寸法を定義すると、座標は html の定義に当てはまります。

サイズ変更されたキャンバスの実際の座標を使用するために 2d コンテキストを「リセット」することは可能ですか?

ありがとうございました。

4

1 に答える 1

2

JS を使用してサイズ変更したのではなく、CSS を使用してサイズ変更しました ( style)。これは、他の画像と同じようにスケーリングするだけです。widthプロパティとheightプロパティを直接設定します。

can.width = (window.innerWidth-20);
can.height = 860;
于 2013-08-21T09:56:55.183 に答える