画布缩放是否通过CSS或JS更高效？ [英] Is canvas scaling more performant via CSS or JS?

问题描述

以下文档提到了HTML5 Canvas高效扩展的一些指导原则： https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#Scaling_canvas_using_CSS_transforms

The following document mentions some guidelines for performant scaling of HTML5 Canvas: 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 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.

目前还不清楚。我应该使画布尽可能小，然后使用CSS缩放，或者从 canvas.width 和 canvas.height <设置更大的画布尺寸/ code>属性（和不缩放画布）？

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?)

推荐答案

目前还不清楚。我应该尽可能地缩小画布，然后使用CSS缩放，或者从canvas.width和canvas.height属性设置更大的画布尺寸（以及不缩放画布吗？）

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?)

是和否，这意味着使用 转换 来缩放元素（画布或任何其他元素）更快即变换矩阵）比在元素上使用CSS宽度和高度，因为变换使用可用的GPU。另外：

Yes and no, it means scaling an element (canvas or any other) is faster using transforms (ie. transformation matrix) than using CSS width and height on the element, as transforms uses the available GPU. Plus:

无论如何，一切都要通过变换矩阵（除非在遇到单位矩阵时进行优化）。 布局属性（如宽度和高度等）会触发布局重排。转换通常可以跳到绘画和合成。

Everything goes through transform matrices anyways (unless optimized not to when a identity matrix is encountered). Layout properties such as width and height etc. triggers layout reflow. Transforms can usually skip to paint and composition.

示例：正如您在此处看到的，第二个div已应用变换但对布局无效（div的鬼空间仍在那里）：

Example: As you can see here, the second div has transforms applied but does nothing to layout (the ghost space for the div is still there):

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>

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

In case of canvas there is an additional advantage from performance and memory side of things when you scale a smaller one up to fit the client window (or parent element) than using a larger one and scale down as in the latter case will produce data you will anyways discard parts of (and at non-linear scale).

我们的目标是定位一个设备：您怀疑用户会使用的大小，例如一个单元格电话。如果屏幕为1：1，则为A-OK。如果用户有一个更大的屏幕，那么扩大规模比瞄准大屏幕尺寸更好，并且大多数/许多用户必须缩减浪费宝贵（？）资源的风险。

The idea is to target a device:size that you suspect your users will use such as a cell phone. If screen is 1:1 as targeted then A-OK. If the user has a larger screen then it's better to scale up than to target a large screen size and risk that most/many users have to scale down wasting precious (?) resources.

有些人会说，当你放大你的质量。没错，但请考虑一下情景。如果你在画布上有很多动作，大多数都不会注意到。

Some will say that when scaling up you loose quality. True, but consider the scenario. If you have a lot of action going on in the canvas most won't notice.

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

From a quality perspective however, the opposite may be beneficial as you can re-sample existing data instead of synthesizing it. This is useful for when say processing large images as end result, but you need to preview them at a smaller size.

但是由于主题是关于性能然后保持1： 1或通过（CSS）转换扩展是一个更好的选择。如果您发现差异取决于您的代码，计算机以及您尝试使用它完成的任务。

But since the topic is about performance then keeping 1:1 or scaling up via (CSS) transforms is a better choice. If you notice the difference depends on your code, computer and what you try to accomplish with it.

这篇关于画布缩放是否通过CSS或JS更高效？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！