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

Question

我一直在尝试使用矩阵来保存画布中 2D 元素的变换。setTransform对此工作得很好，但我遇到了一个有趣的问题，当我尝试在坐标处渲染一个变换的立方体时，我得到了莫尔效应(0, 0)。将坐标设置为(0, 1)或(1, 0)修复此问题。此外，问题似乎只存在于fillRect，渲染文本而不是立方体工作得很好。

示例笔：https ://codepen.io/danman113/pen/mdEYdKx

Answer 1

我想出了一个解决方案，但我仍然不完全理解为什么我会得到莫尔条纹。如果有人可以向我解释这一点，我会很高兴。

解决方案是在设置后重置转换。我不确定为什么这会起作用，因为我认为setTransform在调用它后会隐式重置转换。

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

工作示例：https ://codepen.io/danman113/pen/dyXEGQw

编辑：

正如 Kaiido 在他的评论中指出的那样，莫尔效应的发生是因为clearRect()也发生了变化。添加resetTransform修复程序。