無法在畫布上正確縮放圖像的大小？

最近我一直在處理html5項目，但我認爲我碰到了一個凹凸。目前我正在製作一個用html5和jQuery構建的簡單遊戲。手頭的問題：在畫布上正確顯示圖像。我所做的是創建一個1080 x 720的背景，並嘗試將其放入我完全相同規格的畫布中。不確定這是否是瀏覽器問題，或者是我在Google和堆棧搜索結果中錯過的內容，但非常感謝您的幫助。（使用Firefox 26和Chrome 32）

編輯：對不起，在下面的評論休息詳細..無法在畫布上正確縮放圖像的大小？

來源

2014-02-13 vulpcod3z

請詳細描述實際問題 - 您還沒有說過！ – Alnitak

對不起。基本上我創建了一個1080 x 720px的PNG，我試圖在遊戲中用作背景。這是一款2D平臺遊戲，我希望繪製的畫布尺寸相同。當我加載圖像時，無論如何縮小圖像，它都會顯示在原始圖像大小的2-3倍左右。當我縮小尺寸以適應「1080x720」的畫布時，它變得扭曲，看起來像是一團糟。 – vulpcod3z

這是可能，你的問題是，你使用CSS屬性來設置畫布的大小，而不是元素本身的width和height屬性。

前者（如果指定）設置畫布實際顯示在頁面上的大小。後者設置畫布中像素的實際數量，並將默認值（AFAICR）設置爲300x100。

如果兩者不匹配，則所有畫布操作都將被縮放。

所以，如果你只是用：

<canvas width="1080" height="720"> </canvas>

你應該罰款。

來源

2014-02-13 08:39:08 Alnitak

謝謝，我覺得有點傻，沒有排除故障。 – vulpcod3z

無法在畫布上正確縮放圖像的大小？

回答

相關問題