1

我正在用 CSS 和 Canvas 开发游戏。UI 是用 CSS 开发的，因为它使事情变得更快。

我想开发：1366x768 或 1920x1080。

画布似乎很容易扩展，因为显然只需要（简单示例）：

HTML

<canvas width=1366 height=768>

CSS

canvas{ width:100%; height:100%; }

但是我将如何继续上下缩放整个页面？CSS 包含我想用画布缩放的纹理和其他资产。

到目前为止我发现的解决方案是：

CSS

-webkit-transform: scale(resolutionRatio, resolutionRatio)

在哪里resolutionRatio = newResolution / 1366

但我并不完全相信这一点，因为我很确定它不一样width: 100%，也不知道它的行为是否与画布缩放相同。

你会特别推荐什么吗？我会完全偏离正轨吗？

希望有人可以提供帮助。谢谢！:)

4

1 回答 1

1

您已经在画布上使用了 100% 的宽度和高度，因此它和其中的所有内容都将随页面缩放（不幸的是，质量和性能也会降低）。

由于画布本身不采用 %-values，因此缩放的最佳方法是计算以像素为单位的实际宽度和高度（并删除任何 CSS 缩放）：

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

您可以调用window'sresize事件并准备好重绘函数，以在发生这种情况时按比例重绘所有内容。更多的工作，但更好的结果（和性能）。

如果你另外设置画布，position: fixed你也会在页面更新上得到一点提升。

于 2013-07-03T14:05:26.757 回答