在不同屏幕尺寸下使用畫布

我打算使用HTML5 <canvas>標記創建一個簡單的遊戲，並使用Phonegap將代碼編譯爲本機應用程序，但問題是canvas使用的座標與大小無關的，因此在960x640屏幕上的20,20在480x800上不同。在不同屏幕尺寸下使用畫布

所以我想知道如何在不同的屏幕尺寸下使用<canvas>（它將全屏顯示）。

因此，我想知道如何在不同的屏幕尺寸下使用（它將全屏顯示）。

這是一個很容易解決的常見問題。通常這是通過將硬畫布座標與有時稱爲「模型」的座標分開來完成的。

這真的取決於你的代碼是如何組織的，但我認爲遊戲有一定的高度和寬度，佔據了大部分或全部屏幕。你的目標屏幕的兩個長寬比是1.5和1.666，所以你會想迎合較小的一個

所以你真的想要在一組「模型」座標對屏幕或畫布尺寸沒有影響。由於您只定位了兩種屏幕尺寸，因此您的模型座標可能爲960x640，因爲這是兩個屏幕比例中較小的一個。它不一定是。相反，您的模型座標可能爲100x50。但是這個例子我們將使用960x640作爲我們的模型座標。

在內部，除了這些模型座標之外，您從不使用任何東西。在製作遊戲時，你永遠不會想到任何其他的座標。

當屏幕尺寸爲960x640時，您不必改變任何東西，因爲它是1：1映射，這很方便。

然後，當屏幕尺寸實際上是800x480，當它畫到屏幕上時，您需要翻譯所有的模型座標（3/4），所以遊戲將被製作並在內部使用960x480，但會在（720x480）的區域繪製。您還需要採取任何鼠標或觸摸輸入，並乘以（4/3）將屏幕座標轉換爲模型座標。

在繪製所有內容之前，該翻譯可以簡單地稱爲ctx.scale(3/4, 3/4)。

因此，這兩個平臺的代碼都是假設遊戲的尺寸爲960x640。模型座標成爲屏幕座標系的唯一時間是繪製到畫布上（這是不同的大小）並將畫布鼠標/觸摸座標轉換爲模型座標。

如果這看起來讓你感到困惑，我可以嘗試做一個示例。window對象的

2011-12-24 19:23:46

ctx.scale的作品，但讓點陣圖有點模糊（甚至縮小）。對此的解決方案將是爲每個分辨率（範圍）有不同的圖像集，對嗎？ – Ixx 2012-04-04 12:13:55

爲什麼所有這些顯式縮放？使用HTML中的寬度/高度來設置「模型」大小，並使用UNscaled無處不在的座標。然後使用CSS使您的

由於您只有2個屏幕尺寸，因此您可以使用不同尺寸的2個不同的畫布（以及其背後的邏輯）。
如果你不喜歡這個解決方案，我認爲你只能用％而不是像素絕對尺寸。最後但並非最不重要的，嘗試在元標記中設置不同的值。

2011-12-24 15:12:40 andreapier

使用innerWidth/innerHeight：

canvas.height = window.innerHeight; 
canvas.width = window.innerWidth;

它會自動調整任何屏幕;您必須測試跨平臺/屏幕兼容性！

此外，而不是使用預先定義的x,y座標，使用這樣的：

var innerWidth = window.innerWidth; 
x = innerWidth/3;

2011-12-25 04:30:39

回答