javascript - 通过 CSS 或 JS 缩放 Canvas 是否更高效？

Question

以下文档提到了 HTML5 Canvas 的性能缩放的一些指南:https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#Scaling_canvas_using_CSS_transforms

CSS transforms are faster by using the GPU. Best case is to not scale the canvas or have a smaller canvas and scale up rather than a bigger canvas and scale down. For Firefox OS, target 480 x 320 px.

这还不清楚。我应该使 Canvas 尽可能小，然后使用 CSS 缩放，还是从 canvas.width 和 canvas.height 属性(和“不缩放”)设置更大的 Canvas 尺寸 Canvas ”？)

Answer 1

This is unclear. Should I make the canvas as small as possible, then scale with CSS, or set the larger canvas dimensions from the canvas.width and canvas.height attributes (and "not scale the canvas" at all?)

是和否，这意味着使用 transforms(即转换矩阵)缩放元素( Canvas 或任何其他)比使用 CSS 宽度和高度更快元素，因为转换使用可用的 GPU。加上:

无论如何，一切都经过变换矩阵(除非优化为不遇到单位矩阵)。 布局 宽度和高度等属性触发布局重排。变换通常可以跳到绘画和合成。

示例:正如您在此处看到的，第二个 div 应用了转换但未对布局进行任何操作(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>

在 Canvas 的情况下，当您放大较小的 Canvas 以适应客户端窗口(或父元素)比使用较大的 Canvas 并缩小 Canvas 时，在性能和内存方面还有一个额外的优势，因为在后一种情况下会生成数据，您无论如何都会丢弃部分数据(并且在非线性比例下)。

这个想法是针对您怀疑用户会使用的设备:尺寸，例如手机。如果屏幕为目标 1:1，则 A-OK。如果用户有更大的屏幕，那么向上扩展比以大屏幕尺寸为目标更好，并且冒着大多数/许多用户不得不缩小浪费宝贵(？)资源的风险。

有人会说，扩大规模会降低质量。是的，但考虑一下这种情况。如果您在 Canvas 上进行了很多操作，大多数人都不会注意到。

但是，从质量的 Angular 来看，相反的做法可能是有益的，因为您可以对现有数据重新采样而不是合成数据。这在处理大图像作为最终结果时很有用，但您需要以较小的尺寸预览它们。

但由于主题是关于性能的，因此保持 1:1 或通过 (CSS) 转换放大是更好的选择。您是否注意到差异取决于您的代码、计算机以及您尝试使用它完成的任务。