Javascript 如何在旋转后将画布平移设置为左上角

我正在用简单的线条绘制一个符号，但希望用户能够指定旋转（仅90度）。 这也意味着画布的尺寸会发生变化

不，我计算尺寸并设置画布大小。然后我将旋转中心设置为画布的中心（通过

ctx.translate

）并旋转到任意角度

现在我的问题是：如何将平移设置回左上角，以便正常地从该位置绘制符号？我真的需要用旋转来计算值吗

---

谢谢。

好问题<代码>平移

旋转

和

缩放

都是对当前矩阵进行操作的函数。这给了你很多选择。可能最简单的方法是在上下文矩阵上执行保存还原

ctx.save();
ctx.translate ( to the center );
ctx.rotate ( do rotation );
//Draw rotated stuff
ctx.restore();
//Draw non-rotated stuff

现在在调用restore之后，矩阵恢复到上次保存之前的状态-在opengl中，这实际上是一个堆栈，您可以推送许多上下文，但我不确定webgl是否支持

此链接也可能有帮助：

希望这有帮助

更新：

对。好吧，你有点误会了。平移和旋转将在绘制之前应用。这是因为有很多复杂的数学问题，这真的超出了这个问题的范围。因此，如果要绘制画布的一部分以一种方式旋转，而另一部分以另一种方式旋转，请先

保存

，然后应用转换，执行绘图的第一部分，然后

恢复

以返回到预转换状态。在这一点上，你可以重复。 例如，您可以这样做：

ctx.save();
ctx.translate ( x_center, y_center );
ctx.rotate ( 90 );
//Draw your rotated stuff starting at the center
ctx.translate ( -x_center, -y_center );
//Draw your main frame stuff that is all rotated around the center
ctx.restore();
ctx.save();
ctx.rotate ( 90 );
//Draw your text which is rotated around the top-left corner
ctx.restore();

---

这样，您就有了一个绘图功能，您只需在绘制不同的组件之前设置一个上下文即可。

Mh，但我要绘制的所有线条不是都会被第一个

ctx.translate（到中心）

翻译的吗。这是我搞不懂的事。。我希望旋转围绕中心旋转，但我随后绘制的旋转线是从左上角开始的。非常感谢您的帮助，idbentley，但是这个平移不也要旋转吗？对不起，我想我又误解了。所以你想要的是文字写在实际的左上角，而不是旋转前的左上角。在这种情况下，我不明白你为什么围绕中心旋转？这不是很清楚。如果希望文本位于旋转的左上角，则应从左上角旋转文本，而不是从中心旋转文本。如果您有其他要围绕中心旋转的对象，则应使用上述

保存

，

恢复

技术。好的。。。对不起，我显然解释得很糟糕。如果我从左上角旋转上下文，那么我的绘图将不会保留在画布的中心（因为如果我顺时针旋转90度，整个画布将消失）。这就是为什么我必须从中心旋转。所以我有一个绘图函数，它绘制相同的符号，之前的

ctx.rotate

函数确保它正确旋转。但问题是，我的绘图功能不再从左上角开始绘图，因此没有居中。清楚了吗？