Javascript HTML5游戏开发-缩放HTML+；帆布

我正在用CSS和画布开发一个游戏。用户界面是用CSS开发的，因为它使事情变得更快

我想为1366x768或1920x1080进行开发

---

画布似乎很容易缩放，因为显然所需的只是（简单示例）：

HTML

但是我如何继续上下缩放整个页面呢？CSS包含纹理和其他资源，我想用画布进行缩放

---

到目前为止，我找到的解决方案是：

CSS

其中

resolutionRatio=newResolution/1366

但我并不完全相信这一点，因为我非常确定它与

width:100%

不同，也不知道它是否与画布缩放行为相同

---

你有什么特别推荐的吗？我是否完全偏离了轨道

---

希望有人能帮忙。谢谢！：）

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

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

您可以调用

窗口

的

resize

事件，并在重画比例中的所有内容时准备好重画功能。更多的工作，但更好的结果（和性能）

---

如果您另外将画布设置为

位置：修复了
，那么页面的更新也会得到一些提升。
您已经在画布上使用了100%的宽度和高度，因此画布和其中的所有内容都将随页面进行缩放（不幸的是，质量和性能也会降低）

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

您可以调用
窗口
的
resize
事件，并在重画比例中的所有内容时准备好重画功能。更多的工作，但更好的结果（和性能）

如果您另外将画布设置为
position:fixed
，您也会在页面更新上得到一些提升。
谢谢您的回复。：）你知道我会如何处理CSS/HTML吗？这样它就能沿着画布缩放？@RadiantHex I取决于实际的布局。也许你可以展示一个你想要达到的目标的草图。但一般来说：您可以将元素绑定到边框（上/下/左/右）、百分比或使用JavaScript进行调整。谢谢您的回复。：）你知道我会如何处理CSS/HTML吗？这样它就能沿着画布缩放？@RadiantHex I取决于实际的布局。也许你可以展示一个你想要达到的目标的草图。但一般来说：可以使用JavaScript将元素绑定到边框（上/下/左/右）、百分比或调整。
<canvas width=1366 height=768>

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

-webkit-transform: scale(resolutionRatio, resolutionRatio)

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