HTML5：使用畫布呈現絕對圖像

我正在嘗試將canvas作爲HTML5介紹的一部分。這構成了作業工作，但我根本沒有要求對實際作業提供任何幫助。HTML5：使用畫布呈現絕對圖像

我想寫一個渲染引擎，但有沒有運氣，因爲一旦圖像在畫布上繪製它看起來非常扭曲的，而不是在圖像本身的正確尺寸。

我已提出，在以一定的速度通過它們加載圖像到一個數組，然後迭代一個動畫引擎。這不是問題，並且我認爲不會導致問題，因爲當我在沒有動畫組件的情況下將畫布繪製到畫布時發生這種情況。

我覺得這是因爲當窗口大小進行縮放圖像/歪斜，所以我征服了，通過簡單地重新繪製整個事情一旦調整窗口的大小自然的行爲。

我使用的圖像是等距，並且在像素級拉伸。這會導致失真嗎？似乎設置drawImage（）函數不能正常工作的尺寸。我正在使用JavaScript來處理和渲染畫布。

我通常會嘗試和解決它自己，但我沒有任何時間去思考爲什麼，因爲我不知道爲什麼它甚至縮放/傾斜圖像一旦在畫布上繪製。出於顯而易見的原因，我無法分享代碼。我還應該提到，畫布的尺寸是視口的總寬度，因爲我正在開發一款遊戲。

我的問題是：有沒有人遇到過這一點，我將如何糾正呢？

感謝您的幫助。

2011-11-16 Mark

似乎你用css設置畫布的尺寸。嘗試將它們定義爲html屬性。例如：

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

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

2011-11-16 19:15:49

感謝您的回覆。這沒有任何區別。我首先嚐試使用HTML屬性來調整它的大小，並且它將100視爲像素。使用百分比似乎也不起作用，所以我使用CSS和JS來確保它在X和Y中爲100％。這非常奇怪。 – Mark

這些是像素（不含％）。嘗試創建乾淨的HTML頁面只有一個畫布元素和尺寸設置爲1000/1000像素（沒有任何CSS）。如果它仍然無法正常工作，您將不得不重新考慮JavaScript代碼。 –

是的，問題是我用CSS設置畫布的尺寸。 canvas元素被視爲一個圖像，而我實際上是用CSS縮放畫布而不調整它的大小。謝謝您的幫助。 - 馬克馬上 – Mark

是的，問題是我用CSS設置畫布的尺寸。 canvas元素被視爲一個圖像，而我實際上是用CSS縮放畫布而不調整它的大小。謝謝您的幫助。 - 馬上標記

2011-12-24 21:08:57 Mark

回答