设置像素之前测量 CSS 框
读取显示的画布尺寸，乘以所选的设备比例，设置背景宽度和高度，并转换绘图坐标，以便游戏逻辑可以继续使用 CSS 空间单位。更改宽度或高度后重新应用变换，因为分配这些画布属性会重置其绘制状态。
以 1、1.5 和 2 等比例因子比较单像素网格、对角边缘和小 UI 文本。检查清晰度和响应能力。完整的 devicePixelRatio 乘数是一个起点，而不是每个游戏都应该遵循的规则；降低渲染比例可以降低密集显示的成本，同时保持 CSS 布局不变。
将调整大小和内存作为选择的一部分
后备存储像素数随着两个维度的增加而增加，因此每个方向上的缩放倍数会创建四倍的像素。在交付高密度设置之前，以支持的最大显示尺寸测试繁忙的场景，并查找内存压力或重绘速度较慢的情况。
MDN 的画布指南显示了基于 devicePixelRatio 的设置。 WebGL 的最佳实践页面指出了非整数比率和缩放的微妙之处。浏览器缩放或在显示之间移动窗口后重新检查，如果后备存储的有效尺寸未更改，请避免重复重置后备存储。
关于游戏中的 Canvas 设备像素比的常见问题
画布宽度是否应该始终等于 CSS 宽度乘以 devicePixelRatio？
不一定。这样可以让内容更清晰，但会增加处理量和内存使用。请在相同场景下进行视觉检查，比较全分辨率版本和设有上限的缩放版本。
为什么调整大小后绘图变得模糊？
更改画布宽度或高度会清除其位图并重置上下文状态。重新计算其背景尺寸，再次缩放上下文，然后重新绘制场景。
延伸阅读
发现信息过时了？ 报告需要更正的内容