html - 什么是最有效的 HTML5 Canvas Rotation 方法？

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

Option#2 is definitely out as most efficient because it resets all the context's state properties, not just the transform matrix.

@Ken-AbdiasSoftware is probably right about #3--directly reset with the identity matrix.

Of course, the most efficient rotation could be not doing any rotation at all.

If your image(s) rotate to pre-defined angles, you could cache the image at those angles and then use drawImage without the need for transforms at all.

If you have seldom/never rotated components, group them on a separate canvas/image from the often rotated components.