Как мне повернуть объект в 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

Попробуйте (это позволит вращение вокруг точки)

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>