将 HTML5 画布扩展到整个文档答案

【问题标题】：Expand HTML5 canvas to the whole document将 HTML5 画布扩展到整个文档
【发布时间】：2016-09-19 05:01:30
【问题描述】：

我正在使用 HTML5 画布元素制作多人游戏。此时我用这个 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，这并不是我真正想要的，因为一些分辨率更高的玩家会有更多与分辨率较低的成员相比，游戏地图的广阔视野。

问题：是否有将画布扩展到整个文档并在每个轴上保持固定数量的“画布像素”与用户的屏幕分辨率无关？

谢谢！

【问题讨论】：

您可以应用 CSS scale 变换来放大画布，但我不知道它的效果如何。一般来说，我认为转换是在 GPU 上完成的，所以也许没问题。
@meagar。好点子。您还可以使用window.devicePixelRatio 获取设备像素与 CSS 像素比率，然后使用画布的原生 context.scale 有效显示固定数量的像素（视网膜分辨率可以显示 2x2 像素，而非视网膜可以显示 1x1 像素） .

标签： javascript css html canvas html5-canvas

【解决方案1】：

您可以使用画布函数 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);

【讨论】：