如何旋转画布上下文答案

【问题标题】：How to Rotate Canvas Context如何旋转画布上下文
【发布时间】：2014-12-29 12:02:58
【问题描述】：

如何旋转画布对象 -

ctx.beginPath();
ctx.fillStyle = 'rgba(52, 52, 53, 0.75)';
ctx.fillRect(50, 50, 100, 100);

它不需要是一个循环，但是我怎样才能旋转它呢？

【问题讨论】：

标签： javascript html canvas rotation

【解决方案1】：

@M。 Page 的 回答确实会导致它旋转，但不是您可能想的那样。一般来说rotate()不是关于你的对象的中点，而是另一个点(0,0)。为了解决这个问题，我们需要将对象的中点设为(0,0)，然后进行旋转，然后平移回来。像这样：

ctx.translate((c.width/2) - 50, (c.height/2) - 50); // move back
ctx.rotate(20*Math.PI/180); // rotate
ctx.translate((-c.width/2) + 50, (-c.height/2) + 50); // move to 0,0
ctx.fillRect(50, 50, 100, 100); // Notice the middle point would be (x+50, y+50)

请注意，这实际上是自下而上完成的，这就是图形堆栈的工作方式。

Here is an example，如果您将translate() 注释掉，请注意区别。

-50 和 +50 来自于将我们的盒子的中心放在中间。没有它们，它将围绕框的右下角而不是框的中心旋转。举个直观的例子：

基本上我们想要转换到我们的盒子的中点在(0,0)的位置。

【讨论】：

+50 和 -50 的来源是什么？
@AlexSafayan 因为我们盒子的中点距离两边的左下角 50 像素。否则它将围绕框的左上角旋转。
@AlexSafayan 我已经更新了我的答案以清楚地显示这一点，链接有两个动画旋转。

【解决方案2】：

像这样：

<html>
<body>
<canvas id="myCanvas" width="134px" height="331px" onclick="draw()"></canvas> 
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle = 'rgba(52, 52, 53, 0.75)';
    ctx.rotate(20*Math.PI/180);
    ctx.fillRect(50, 50, 100, 100);
</script>
</body>
</html>

【讨论】：

可以添加html、css和javascript吗？