画布变换渲染

时间:2013-07-12 19:14:31

标签: javascript canvas 2d

是否有任何方法可以将转换应用于画布元素(scaletranslatesetTransform),而无需先清除画布然后重绘其上的所有内容。我的具体效果是使用鼠标拖动图形(所以只用{1}}一遍又一遍地使用鼠标),但每次翻译我都要清除画布并重新绘制我在那里的内容。理想情况下,我想调用translate方法并使用一些超快的内置方法为我重新绘制画布。一旦有足够数量的东西重绘,只需迭代和重绘的成本就可能导致不太理想的性能。

如何提高性能?

1 个答案:

答案 0 :(得分:1)

每次都需要重新绘制,因为翻译,旋转和缩放只会将参数设置到画布,并且不会对现有内容执行任何操作。它们只适用于绘制到画布上的下一个东西。

但是,您可以尝试使用CSS进行转换。这将转换canvas元素,包括其内容。

请注意,在这种情况下,您需要计算鼠标坐标的反偏移量(如果您将变换保留在画布上,也是如此)。