canvas rotate正负时针旋转，镜面上下/左右翻转

作者：System 时间：2024年08月08日分类：所有,css3 字数：609

在HTML5的Canvas中，rotate()函数默认是逆时针旋转。如果你想要进行正负时针旋转，你可以使用rotate()函数，并传递一个相应的角度参数。

例如，如果你想要顺时针旋转45度，你可以这样做：




context.rotate(Math.PI / 4); // 角度转换为弧度

如果你想要逆时针旋转45度，你可以这样做：




context.rotate(-Math.PI / 4); // 角度转换为弧度

关于镜面上下翻转和左右翻转，这通常涉及到scale()函数的使用。

例如，水平镜像（左右翻转）：




context.scale(-1, 1);

垂直镜像（上下翻转）：




context.scale(1, -1);

如果你想同时进行左右和上下翻转，你可以这样做：




context.scale(-1, -1);

请注意，这些变换是相对于Canvas的原点进行的，原点默认位于Canvas的中心，但是你可以通过translate()函数改变原点的位置。

这些变换都是相对于当前的状态进行的，所以你可以在任何时候调用它们，包括在绘制图形或图像之前。