Javascript 如何旋转画布上下文_Javascript_Html_Canvas_Rotation

Javascript 如何旋转画布上下文

javascript html canvas

Javascript 如何旋转画布上下文,javascript,html,canvas,rotation,Javascript,Html,Canvas,Rotation,如何旋转画布对象，如- ctx.beginPath(); ctx.fillStyle = 'rgba(52, 52, 53, 0.75)'; ctx.fillRect(50, 50, 100, 100); 它不需要是一个循环，但如何旋转它？像这样： <html> <body> <canvas id="myCanvas" width="134px" height="331px" onclick="draw()"></canvas> <scr

如何旋转画布对象，如-

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

它不需要是一个循环，但如何旋转它？

像这样：

<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>

@佩奇的回答确实导致了这种情况的发生，但不是以你可能的思维方式。通常，旋转不是围绕对象的中点，而是另一个点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)

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

，如果您对翻译进行注释，请注意差异

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

基本上，我们希望转换到方框中点位于0,0的位置。

你能添加html、css和javascript吗？什么是+50和-50？@Alexafayan，因为方框的中点距离两边的左角50像素。否则它会围绕框的左上角旋转。@Alexafayan我已经更新了我的答案，清楚地显示了这一点，链接有两个动画旋转。