javascript - 画布变换渲染

Question

有什么方法可以将转换应用于画布元素（scale或translate或setTransform），而无需先清除画布然后重绘其上的所有内容。我的具体效果是使用鼠标拖动图形（所以只是translate用鼠标反复拖动），但每次翻译时我都必须清除画布并重新绘制我在那里的内容。理想情况下，我只想调用一个translate方法并让一些超快的内置方法为我重新渲染画布。一旦有足够多的东西需要重绘，仅仅迭代和重绘的成本就会导致性能不佳。

任何想法如何在这里提高性能？

Answer 1

您每次都必须重新绘制，因为平移、旋转和缩放只会为画布设置一个参数，而不会对现有内容做任何事情。它们仅适用于绘制到画布上的下一个事物。

但是，您可以尝试使用 CSS 进行转换。这将改变画布元素，包括其内容。

请注意，在这种情况下，您需要计算鼠标坐标的反偏移（如果您将变换保留在画布本身上）。