將HTML5畫布展開爲整個文檔

我正在使用HTML5 canvas元素製作多人遊戲。這時我擴展畫布到整個窗口，這段JavaScript代碼：將HTML5畫布展開爲整個文檔

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

使用畫布上面的代碼將佔據整個文檔空間，這將有WIDTH像素的xx軸線和HEIGHT像素上yy軸，這並不是我想要的，因爲一些分辨率較高的玩家比較低分辨率的玩家會對遊戲地圖有更廣闊的視野。

問題：有沒有辦法將畫布展開到整個文檔，並在每個軸上保留固定數量的「畫布像素」，而與用戶的屏幕分辨率無關？

謝謝！

來源

2016-09-18 Daniel Oliveira

你可以應用CSS'scale'改造以擴大在畫布上，但我不知道如何將工作。一般來說，我認爲轉換是在GPU上完成的，所以也許它會好起來的。 – meagar

@meagar。好點子。您還可以使用'window.devicePixelRatio'來獲取設備像素與CSS像素的比率，然後使用畫布的本地'context.scale'來有效顯示固定的像素數量（視網膜分辨率可以顯示2×2像素，而非視網膜可以顯示1×1像素）。 – markE

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

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);

來源

2016-09-18 17:29:35 chocolattes

將HTML5畫布展開爲整個文檔

回答

相關問題