座標縮放畫布元素

我已經利用搜索引擎的，但我沒有得到我想要的信息，所以我想問是否有人使用一個很好的方法/技巧自制的座標系中一個HTML5畫布元素。座標縮放畫布元素

我想用畫布元素，它應該適應整個瀏覽器窗口，像這樣以開發HTML5 2D遊戲：

<canvas style="width: 100%; height: 100%;"> 
    No support for your browser, unfortunately... 
</canvas>

的問題是，我不知道我應該如何管理我的遊戲的座標。在我的遊戲中，玩家例如當用戶按下右箭頭鍵時，立即向右移動32px，但是如果我調整canvas元素的大小，會發生什麼？邏輯上游戲的「塊」也會改變它們的大小，所以座標的單位不再是像素。

是否有其他單位我可以使用或你會建議我做什麼？

2012-02-15 SmartArray

集畫布width和height屬性到遊戲區域大小

<canvas id="mycanvas" width="400" height="300"/>

而其樣式設置爲在屏幕上所需的顯示尺寸。

#mycanvas { 
    width: 100% 
    height: 100% 
    display: block 
}

現在你可以在代碼中總是以爲畫布是400×300和繪圖忽略屏幕上的實際物理像素尺寸時。

您需要縮放鼠標點擊以對應遊戲座標上的實際位置。所以如果你在（x，y）的畫布上點擊鼠標，你可以通過x =（x/$（'＃mycanvas'）。width（））* 400和y得到遊戲座標上的位置。如果畫布不是全屏，請使用$（'＃mycanvas'）。offset（）獲取點擊座標的增量。

2012-02-15 20:23:53

那這樣的邏輯..我覺得傻，現在;）感謝您的幫助主管！ – SmartArray 2012-02-15 20:25:44

永遠不會使用CSS尺寸作爲畫布，它們會使事情變得非常難看。

你所寫的不會使你的畫布頁面的寬度，這使得它寬300個像素×150個像素高（默認值），然後扭曲直到它的寬度和頁面的高度。

堅持Canvas的寬度和高度屬性，而不是使用CSS。

如果您想使其成爲頁面的大小，您可以使用其他選項，例如將畫布放在div內，然後使canvas.width等於div.style.clientWidth。

對於具有不同（全屏與否）窗口大小，請參閱我的回答談到「模型座標」在這裏：Working with canvas in different screen sizes

2012-02-15 20:36:48

對於幾乎所有的HTML元素都是如此......但不適用於

回答