キャンバストランスフォームが期待通りに動作しない

Question

400x200キャンバスがあるとします。 (0, 0)がキャンバスの真ん中にある座標系で作業したい場合は、正の値yを意味し、正の場合はxを意味します。

だから、私は次のようにトランスフォームセット：私は上記のスニペットのように四角形を埋めるとき

var ctx = document.getElementById("canvas").getContext("2d"); 
 
ctx.setTransform(1, 0, 0, -1, 200, 100); 
 
ctx.fillRect(-20, -20, 40, 40);

<canvas id="canvas" style="width: 400px; height: 200px"></canvas>

だから、私はの真ん中を中心広場を見ることを期待しますキャンバス要素。ただし、上記のスニペット（最新のChromeで）を実行すると、正方形は明らかに中心に配置されません。どうしてこれなの？私は変換行列について何かを誤解していますか？もしそうなら、どうすれば私の目標を達成できますか？

Answer 1

キャンバス要素のサイズは、次に、CSSを使用して延伸され、高さ150個のピクセルのキャンバスのデフォルトを意味する適切に設定されていません。これは、オブジェクトがオフセットされているという錯覚を与えます。

また

<canvas id="canvas" width=400 height=200></canvas> 

は、Y軸は今ので、任意のテキストと画像が逆さまにも描かれて逆さまに反転していることに注意してください。

が正しくキャンバスサイズは、CSSの代わりにその属性を使用して設定するには。これらは、ローカル変換が正しく描画される必要があります。

Answer 2

styleの寸法は無視され、デフォルトの寸法は300×150です。だからの

<canvas id="canvas" width="400" height="200"></canvas> 

独立して適切に設定し、あなたがとにかくローカル座標系を使用しようとしている場合は特に、ハードコードされた寸法に依存しないことをお勧めすることができます。

マイスニペット修飾：ローカル座標は依然として、少なくとも正方形(-100,100)×(-100,100)を含むよう

• 実際キャンバス寸法及びスケールを使用。

• キャンバスが「間違っている」場合でも座標原点にあることを示す変換を設定する前に座標クロスを追加します。

• 変換後、プラスの値を示すyの位置に円を追加して、「上」が実際に上がっていることを示します。

var cnv = document.getElementById("canvas"); 
 
var w = cnv.width, h = cnv.height; 
 
var ctx = cnv.getContext("2d"); 
 
ctx.beginPath(); 
 
ctx.moveTo(0,h/2); ctx.lineTo(w,h/2); 
 
ctx.moveTo(w/2,0); ctx.lineTo(w/2,h); 
 
ctx.closePath(); ctx.stroke(); 
 

 
var scale = Math.min(w,h)/200.0; 
 

 
ctx.setTransform(scale, 0, 0, -scale, w/2, h/2); 
 

 
ctx.moveTo(0,50); ctx.arc(0,50,10,0,2*Math.PI); ctx.stroke(); 
 

 
ctx.fillRect(-20, -20, 40, 40);

<canvas id="canvas" width="450" height="250"></canvas>