什么是最有效的HTML5 Canvas旋转方法？

Question

我想知道在画布上旋转特定图像的最有效方法是什么。

1

        context.translate(centerX, centerY);
        context.rotate(rect.radians);
        context.strokeRect(-rect.width/2,  -rect.height/2, rect.width,  rect.height);
        context.rotate(rect.radians *-1);
        context.translate(-centerX, -centerY);

2

        context.save();
        context.translate(centerX, centerY);
        context.rotate(rect.radians);
        context.strokeRect(-rect.width/2,  -rect.height/2, rect.width, rect.height);
        context.restore();

3

        context.translate(centerX, centerY);
        context.rotate(rect.radians);
        context.strokeRect(-rect.width/2,  -rect.height/2, rect.width, rect.height);
        context.setTransform(1,0,0,1,0,0);

我将在每个动画帧中使用多个对象运行此函数。

Answer 1

选项＃2绝对是最有效的，因为它会重置所有上下文的状态属性，而不仅仅是变换矩阵。

@ Ken-AbdiasSoftware可能正确＃3 - 直接使用单位矩阵重置。

当然，效率最高的轮换可能根本不进行任何轮换。

如果您的图像旋转到预定义的角度，您可以在这些角度缓存图像，然后使用drawImage而根本不需要变换。

如果您很少/从未旋转过组件，请将它们放在与经常旋转的组件不同的画布/图像上。