我正在用CSS和Canvas开发游戏。用户界面正在开发中，因为它可以让事情变得更快。
我想开发：1366x768或1920x1080。
Canvas似乎很容易扩展，因为显然所需要的只是（简单示例）：
HTML
<canvas width=1366 height=768>
CSS
canvas{ width:100%; height:100%; }
但是我如何继续上下缩放整个页面呢？ CSS包含纹理和其他资产，我想用画布进行缩放。
到目前为止我找到的解决方案是：
CSS
-webkit-transform: scale(resolutionRatio, resolutionRatio)
其中resolutionRatio = newResolution / 1366
但我并不完全相信这一点，因为我很确定它与width: 100%不一样，并且不知道它是否与画布缩放相同。
你会推荐一些特别的东西吗？我完全偏离了吗？
希望有人可以提供帮助。谢谢！ ：）
答案 0 :(得分：1)
您已经在画布上使用了100％的宽度和高度，因此它和其中的所有内容都将与页面一起缩放（不幸的是，质量和性能也会降低）。
缩放的最佳方法，因为canvas不接受％-values本身，是以像素为单位计算实际宽度和高度（并删除任何CSS缩放）：
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
这可以调用window的{{1}}事件并准备好重绘功能，以便重新绘制所有内容。更多的工作，但更好的结果（和性能）。
如果你另外将画布设置为resize，你也会对页面的更新有所提升。