画布转换渲染

Question

有没有办法将转换应用于画布元素（scale或translate或setTransform），而无需先清除画布，然后重新绘制所有内容。我的具体效果是使用鼠标拖动图形（所以只需translate一遍又一遍地用鼠标），但每次翻译我都必须清除画布并重新绘制我在那里的内容。理想情况下，我只想调用translate方法，并使用一些超快的内置方法为我重新布置画布。一旦有足够的东西需要重新绘制，只是迭代和重绘的成本会导致性能低于预期。

任何想法如何提高这里的表现？

Answer 1

您将不得不重绘每一次，因为平移，旋转和缩放仅将参数设置为画布，并且不对现有内容执行任何操作。它们只适用于画在画布上的下一个东西。

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

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