我用简单的线条绘制符号，但希望用户能够指定旋转（仅限90度）。 这也意味着我画布的尺寸发生了变化。
不，我计算尺寸，并设置画布尺寸。然后我将旋转中心设置到画布的中心（通过ctx.translate）并旋转到任意角度。
现在我的问题是：如何将翻译设置回左上角，这样我可以从该位置正常绘制符号？我真的必须用旋转计算值吗？
感谢。
答案 0 :(得分：1)
好问题！ translate rotate和scale都是对当前矩阵进行操作的函数。这为您提供了很多选择。可能最简单的事情是在上下文矩阵上进行保存恢复
ctx.save();
ctx.translate ( to the center );
ctx.rotate ( do rotation );
//Draw rotated stuff
ctx.restore();
//Draw non-rotated stuff
现在在调用restore之后，矩阵恢复到上一次保存之前的状态 - 在opengl中，这实际上是一个堆栈，你可以推送很多上下文，但我不确定webgl是否支持它。
此链接也可能有所帮助：https://developer.mozilla.org/en/drawing_graphics_with_canvas
希望这有帮助。
更新：
是。好的，所以你误解了一些东西。在绘图之前应用平移和旋转。这是因为很多复杂的数学，并且超出了这个问题的范围。因此，如果您想以一种方式绘制部分画布，而另一部分以不同的方式旋转，则首先save，然后应用变换，执行绘图的第一部分，然后{{1回到预转换状态。在这一点上，你可以重复。
因此，例如，您可以这样做：
restore通过这种方式，您可以使用1个绘图功能，只需在绘制不同的组件之前设置上下文。