以下文档提到了 HTML5 Canvas 性能缩放的一些准则：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#Scaling_canvas_using_CSS_transforms https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#Scaling_canvas_using_CSS_transforms
通过使用 GPU，CSS 转换速度更快。最好的情况是不缩放画布或使用较小的画布并放大，而不是使用较大的画布并缩小。对于 Firefox OS，目标像素为 480 x 320 像素。
这还不清楚。我应该使画布尽可能小，然后使用 CSS 进行缩放，还是从canvas.width and canvas.height属性（以及“根本不缩放画布”？）
这还不清楚。我应该使画布尽可能小，然后使用 CSS 进行缩放，还是从 canvas.width 和 canvas.height 属性设置较大的画布尺寸（并且“根本不缩放画布”？）
是和否，这意味着使用缩放元素（画布或任何其他元素）会更快转变（即变换矩阵）而不是在元素上使用 CSS 宽度和高度，因为变换使用可用的 GPU。加：
无论如何，一切都经过变换矩阵（除非优化到遇到单位矩阵时）。Layout宽度和高度等属性会触发布局重排。变换通常可以跳到绘画和合成。
示例：正如您在此处看到的，第二个 div 应用了变换，但没有执行任何操作layout（div 的幽灵空间仍然存在）：
div {
width:100px;padding:100px 0 0 0;margin:0 5px;
display:inline-block;background:#7f9;border:2px solid #000
}
div:nth-child(2) {
transform:scale(1.5) translate(30px, 30px)
}
<div></div><div></div><div></div><div></div>
对于画布，当您放大较小的画布以适应客户端窗口（或父元素）时，与使用较大的画布并缩小尺寸相比，在性能和内存方面有一个额外的优势，因为在后一种情况下会产生您的数据无论如何都会丢弃部分（并且在非线性尺度上）。
这个想法是针对您怀疑用户将使用的设备：尺寸，例如手机。如果屏幕比例为 1:1，则 OK。如果用户拥有更大的屏幕，那么最好是放大，而不是瞄准大屏幕尺寸，并且冒着大多数/许多用户必须缩小浪费宝贵（？）资源的风险。
有人会说，扩大规模会降低质量。确实如此，但请考虑一下场景。如果画布上有很多动作，大多数人都不会注意到。
From a quality然而，从角度来看，相反的情况可能是有益的，因为您可以重新采样现有数据而不是合成它。这对于处理大图像作为最终结果非常有用，但您需要以较小的尺寸预览它们。
但由于主题是关于性能的，因此保持 1:1 或通过 (CSS) 转换进行扩展是更好的选择。如果您注意到差异取决于您的代码、计算机以及您尝试用它完成的任务。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
