当一个图片同时有旋转平移和缩放时，在 canvas 画布上绘制时应该优先绘制哪个?

Question

canvas 绘制图形，当一个图片同时有旋转平移和缩放时，在画布上绘制时应该优先绘制哪个？

Answer 1

HTML 标准 中规定：

The transformations must be performed in reverse order.

译文：必须以相反的顺序执行变换。

Note:
For instance, if a scale transformation that doubles the width is applied to the canvas, followed by a rotation transformation that rotates drawing operations by a quarter turn, and a rectangle twice as wide as it is tall is then drawn on the canvas, the actual result will be a square.

译文：例如，如果先将宽度加倍的缩放应用于画布，再旋转 90 度，然后在画布上绘制一个宽度是其高度的两倍的矩形，则实际结果将是一个正方形。

可以理解为在当前已变换的坐标系上再添加变换（矩阵右乘）

但对人而言更直观的是在初始的固定的坐标系上进行变换（矩阵左乘）

下图展示了先 rotate 再 scale 和先 scale 再 rotate 的两种效果

Pen: https://codepen.io/mannix-zho...

Answer 2

优先哪个不是要看你想要什么效果么
一般来说对图形进行变换时，符合直觉的顺序是 TRS tranlate->rotate->scale
具体为什么这里就没法展开了

Answer 3

我觉得你可以使用ctx.transform一起绘制