HTML5：使用畫布渲染絕對圖像

Question

我正在嘗試將畫布作為HTML5簡介的一部分。 這構成了作業，但我根本不要求任何有關實際課程的幫助。

我正在嘗試編寫一個渲染引擎，但是沒有運氣，因為一旦將圖像繪制在畫布上，它就會看起來非常失真，而不是圖像本身的正確尺寸。

我制作了一個動畫引擎，將圖像加載到數組中，然后以一定的速度遍歷它們。 這不是問題，我認為這不是問題的根源，因為當我在沒有動畫組件的情況下將圖像繪制到畫布上時會發生這種情況。

我認為這是在調整窗口大小時縮放/傾斜圖像的自然行為，因此我克服了這一問題，只需在調整窗口大小后重新繪制整個對象即可。

我正在使用的圖像是等軸測的，並以像素級別繪制。 這會導致失真嗎？ 似乎在drawImage（）函數上設置尺寸不起作用。 我正在使用JavaScript來處理和渲染畫布。

我通常會自己嘗試解決這個問題，但是我沒有時間去思考為什么，因為我不知道為什么一旦在畫布上繪制圖像，它甚至會縮放/傾斜圖像。 由於明顯的原因，我無法共享代碼。 我還要提到，在我開發游戲時，畫布的尺寸是視口的總寬度。

我的問題是：有人遇到過這個問題，我該如何糾正？

謝謝你的幫助。

Answer 1

似乎您使用CSS設置了畫布的尺寸。 嘗試將它們定義為html屬性。 例：

<canvas id="test" width="100" height="100">Fallback content</canvas>

編輯：它將畫布元素的寬度/高度設置為100/100像素。

Answer 2

是的，問題是我正在使用CSS設置畫布的尺寸。 canvas元素被視為圖像，實際上我在使用CSS縮放畫布而不調整其大小。 謝謝您的幫助。 –馬克剛