javascript - HTML 5 Canvas，旋转一切

Question

我制作了一个气缸压力表，与这个非常相似:

它是使用大约 7 个左右的函数绘制的......我的有点不同。它非常灵活，我可以设置颜色、透明度、高度、宽度、是否显示％文本以及许多其他选项。但现在我需要同样的东西，但全部旋转 90 度，以便我可以将高度设置为长，宽度设置为低，以生成更像这样的东西:

我找到了 ctx.rotate，但无论它去哪里，所有形状都会崩溃。ctx.save/restore 似乎什么也没做，我尝试将其放入每个形状绘制函数中。例如，我尝试修改drawOval函数，以便如果水平设置为1，它会首先旋转 Canvas ；但它似乎每次迭代都会旋转它，即使是保存/恢复......所以顶部圆柱体会旋转，底部会旋转两次或类似的东西。很难说出到底发生了什么。我究竟做错了什么？我不想复制所有这些代码并花费数小时对其进行自定义，只是为了生成我已经拥有但水平转换的东西。尔格!帮助。

Answer 1

选项 1

要旋转所有内容，只需对元素本身应用变换即可:

canvas.style.transform = "rotate(90deg)";         // or -90 depending on need
canvas.style.webkitTransform = "rotate(90deg)";

选项 2

在绘制任何内容之前和使用任何 save() 之前旋转上下文。与 CSS 版本不同，您首先需要平移到中心，然后旋转，最后平移回来。

在执行此操作之前，您需要确保 Canvas 的宽度和高度已交换。

ctx.translate(ctx.canvas.width * 0.5, ctx.canvas.height * 0.5);    // center
ctx.rotate(Math.PI * 0.5);                                         // 90°
ctx.translate(-ctx.canvas.width * 0.5, -ctx.canvas.height * 0.5);

当然，作为选项 3，您可以重新计算所有值以沿着另一个轴移动。