畫布變形不如預期的那樣

假設我有一個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中）時，該方塊顯然不居中。爲什麼是這樣？我誤解了有關變換矩陣的內容嗎？如果是這樣，如何可以我實現了我的目標？

來源

2016-12-02 cemulate

大小爲畫布元件沒有被正確設定，這意味着在畫布默認爲在高度150個像素，然後將其伸出使用CSS。這給出了對象錯位的錯覺。

要正確設置畫布大小使用它的屬性，而不是CSS的：

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

另外要注意的是，Y軸現在翻轉倒置，所以任何的文字和圖像繪製倒置以及。這些將需要本地轉換才能正確繪製。

來源

2016-12-02 11:09:09 K3N

啊，我完全理解。我沒有意識到CSS屬性與「本地」畫布屬性之間存在區別。謝謝！ – cemulate

問題似乎是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>

來源

2016-12-02 10:38:44 LutzL

畫布變形不如預期的那樣

回答

相關問題