将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画布展开为整个文档

回答

相关问题