javascript - 了解 HTML 5 Canvas 缩放和平移顺序

Question

我正在围绕中心 X,Y 0,0 绘制一些图形。当需要渲染时，我使用 translate 重新定位，然后使用缩放使图形填充 Canvas (例如，将所有内容缩放 50%)。

我注意到，无论是调用缩放然后翻译，还是翻译然后缩放，这都很重要，但我无法完全理解它。这是个问题，因为并非一切都适合，但我的心智模型并不完整，所以很难修复它。

有人可以解释为什么缩放和翻译调用的顺序很重要吗？

Answer 1

那么让我们在 300x300 的 Canvas 上绘制一个网格:

http://jsfiddle.net/simonsarris/4uaZy/

这样就可以了。没什么特别的。红线表示原点所在的位置，穿过 (0,0) 并延伸很远很远，所以当我们平移它时，我们会看到一些东西。这里的原点是左上角，红线在 (0,0) 处相交。

下面的所有翻译都发生在我们绘制网格之前，因此我们将移动网格。这可以让您准确地看到原点发生了什么。

---

因此让我们将 Canvas 平移 100,100，将其向下+向右移动:

http://jsfiddle.net/simonsarris/4uaZy/1/

所以我们已经翻译了原点，这是红色 X 居中的地方。原点现在位于 100,100。

---

现在我们将平移然后缩放。请注意原点如何与上一张图像位于同一位置，一切都只是两倍大。

http://jsfiddle.net/simonsarris/4uaZy/2/

繁荣。原点仍为 100,100。不过，一切都膨胀了 2。原点变了，然后一切都膨胀起来了。

---

现在让我们反过来看一下。这次我们先缩放，所以一切从一开始就是胖的:

http://jsfiddle.net/simonsarris/4uaZy/3/

一切都膨胀了 2。原点在 0,0，它的起点。

---

现在我们进行缩放，然后进行翻译。

http://jsfiddle.net/simonsarris/4uaZy/4/

我们仍在平移 100,100，但原点已经移动了 200,200 实际像素。将此与之前的两张图片进行比较。

这是因为缩放后发生的一切都必须缩放，包括额外的变换。因此，在缩放的 Canvas 上按 (100,100) 进行变换会导致它移动 200、200。

---

这里要记住的一点是，从那时起，改变转换会影响事物的绘制(或转换!)方式。如果缩放 x2，然后平移，则平移将为 x2

如果您想从数学上了解每一步发生了什么，我建议您查看此处的代码:

https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js

这模拟了 canvas 完成的整个转换过程，让您看到之前的转换如何修改之后的转换。