如何在canvas和js中旋转对象;我的例子不是按照我的期望旋转

Question

我试图围绕矩形的中心旋转它，但它并没有按我期望的方式旋转。

这里有一个例子：

https://jsfiddle.net/37ur8dfk/1/

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let x = 100;
let y = 100;
let w = 100;
let h = 50;
// Draw a red dot to highlight the point I want to rotate the rectangle around
ctx.fillStyle = '#ff0000';
ctx.beginPath();
ctx.arc(x, y, 4, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
// Attempt to rotate the rectangle aroumd x,y
ctx.save();
ctx.fillStyle = '#000000';
ctx.translate(-x, -y);
ctx.rotate(10 * Math.PI/180);
ctx.translate(x, y);
ctx.fillRect(x - w/2, y - h/2, w, h);
ctx.restore();

我把矩形的中心作为x，y坐标。然后我把它翻译成-x，-y，把它的原点改成0,0。然后我把它旋转了一些度，但它似乎并没有绕着0,0坐标旋转。我的理解是，旋转应该围绕原点或0,0旋转整个上下文。

请看一下jsfiddle，看看我的意思。

我在这里错过了什么？

Answer 1

你得到了反转。

您不是在平移矩形，而是在平移上下文的转换矩阵
把它想象成一张纸和一只带笔的手臂。

当您转换上下文时，手臂正在按提供的方向移动。旋转上下文时，手臂正在旋转。

因此，要将矩形的中心设置为旋转原点，首先需要移动手臂，使笔位于矩形的中心，然后才能旋转。我们将手臂移回初始位置，使x坐标和y坐标匹配。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let x = 100;
let y = 100;
let w = 100;
let h = 50;
// Attempt to rotate the rectangle aroumd x,y
ctx.save();
ctx.fillStyle = '#000000';
// move to transformation-origin
ctx.translate(x, y);
// transform
ctx.rotate(10 * Math.PI/180);
// go back to where we were
ctx.translate(-x, -y);
ctx.fillRect(x - w/2, y - h/2, w, h);
ctx.restore();
// Draw a red dot to highlight the point I want to rotate the rectangle around
ctx.fillStyle = '#ff0000';
ctx.beginPath();
ctx.arc(x, y, 4, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();

<canvas id="canvas" width="500" height="400"></canvas>

Answer 2

Try(这将允许围绕点旋转(

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let x = 100;
let y = 100;
let w = 100;
let h = 50;
let angle = Math.PI/8;
ctx.save();
ctx.fillStyle = '#000000';
ctx.translate(x, y);
ctx.rotate(angle);
ctx.fillRect(0, 0, w, h);
ctx.restore();
ctx.save();
ctx.fillStyle = '#ff0000';
ctx.beginPath();
ctx.arc(x, y, 4, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.restore();

canvas {
border: 1px solid black;
}

<canvas id="canvas" width="500" height="400"></canvas>