將HTML5畫布擴展到整個文檔

Question

我正在使用HTML5 canvas元素制作多人游戲。 這時，我使用以下javascript代碼將畫布擴展到整個窗口：

var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var canvas =document.getElementById("gameCanvas");
canvas.width = WIDTH;
canvas.height = HEIGHT;

使用畫布上方的代碼將占據整個文檔空間，並且在xx軸上具有WIDTH px，在yy軸上具有HEIGHT px，這並不是我真正想要的，因為某些分辨率更高的播放器將具有更廣闊的視野游戲地圖要比分辨率較低的會員高。

問題：是否有將畫布擴展到整個文檔並在每個軸上保持固定數量的“畫布像素”的方式，而不依賴於用戶的屏幕分辨率？

謝謝！

Answer 1

您可以使用canvas函數scale（）或通過CSS縮放畫布。 這將是使用canvas函數實現解決方案的示例：

var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var x = WIDTH/c.width;
var y = HEIGHT/c.height;

c.width=WIDTH;
c.height=HEIGHT;

ctx.scale(x,y);
ctx.strokeRect(5, 5, 140, 140);