Javascript 使用setTransform旋转矩形时的莫尔效应

我一直在玩使用矩阵来保存画布中2D元素的变换

setTransform

在这方面效果很好，但我遇到了一个有趣的问题，当我尝试在坐标

（0，0）

处渲染变换后的立方体时，我得到了莫尔效应。将坐标设置为

（0,1）

或

（1,0）

可解决此问题。此外，问题似乎只存在于

fillRect

，呈现文本而不是立方体效果很好

示例笔：

---

我想出了一个解决方案，但我仍然不完全理解为什么要得到莫尔图案。如果有人能给我解释一下，我会很高兴的

解决方案是在设置转换后重置转换。我不知道为什么这样做，因为我认为

setTransform

会在调用转换后隐式重置转换

c.setTransform(transform[0], transform[3], transform[1], transform[4], transform[6], transform[7])
c.fillRect(0, 0, 100, 100)
c.resetTransform()

工作示例：

编辑：

---

正如Kaido在他的评论中指出的那样，莫尔效应的产生是因为

clearRect（）

也被转换。添加

resetTransform

可解决此问题。

setTransform

会将矩阵设置为传递的绝对值（与

transform

和co相反，后者会将矩阵设置为与当前值相对的值）。但是，一旦设置，矩阵将保持这样（否则您将无法使用它）。因此，当您在帧的开头调用

clearRect（）

时，您的上下文仍在旋转。路径总是抗锯齿的，而使用rect路径的clearRect也是如此。因此，抗锯齿（半透明像素）的结果是保持每帧->云纹。这是一个很好的解释！我不认为SETFIX会影响<代码> CurrCutt < /C> >以及<代码> Rec> < /Cord>。