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，这不是我想要的，因为一些具有更高分辨率的玩家将拥有更多比分辨率较低的成员更广泛地看待游戏地图。

问题：无论如何都要将画布扩展到整个文档并保留固定数量的＆＃34;画布像素＆＃34;在每个轴上，与用户的屏幕分辨率无关？

谢谢！

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

将HTML5画布展开到整个文档

1 个答案: