Canvas: Obracanie obiektu wokół jego środka

Jak obrócić obiekt?

Pod tym linkiem znajdziesz demo przykładu opisanego w tym wpisie.

HTML:

<canvas id="canvas" width="800" height="600"></canvas>

JavaScript:

let angle = 0;

const context = document.getElementById("canvas").getContext("2d");
const rect = {
		width: 50,
		height: 50,
		x: context.canvas.width / 2,
		y: context.canvas.height / 2
}

const degreesToRadians = (degrees) => {
		return degrees * (Math.PI / 180);
};

const render = () => {
		context.fillStyle = '#000';

		context.fillRect(0, 0, context.canvas.width, context.canvas.height);
		context.fillStyle = '#ff0000';
		context.save();
		context.translate(rect.x, rect.y)
		context.rotate(degreesToRadians(angle));
		context.fillRect(-rect.width / 2, -rect.height / 2, rect.width, rect.height);
		context.restore();
		angle += 0.5;
		requestAnimationFrame(render);
}
render();

Za obrót obiektu wokół jego środka odpowiadają dwie linijki.

Pierwsza:

context.rotate(rotate);

Jest to kąt, o jaki ma być obrócony obiekt. Podany w radianach. Stopnie obliczane są w radiany za pomocą funkcji: degreesToRadians.

Druga linijka:

context.fillRect(-rect.width / 2, -rect.height / 2, rect.width, rect.height);

Odpowiedzialna jest za ustawienie osi obrotu obiektu. Na jego środku.