Canvas: Obracanie obiektu za pomocą myszki

Myszka i obrót

Żeby obrócić obiekt w kierunku, w którym znajduje się kursor myszy, należy obliczyć kąt. Kąt, który znajduje się pomiędzy: dodatnią osią X i linią prostą, którą tworzą dwa punkty: pierwszy punkt to (0, 0), a drugi to: podany (x, y).

W poniższym przykładzie drugi punkt jest obliczany, w następujący sposób:

const y = rect.y - mouse.y + canvasRect.top;
const x = rect.x - mouse.x + canvasRect.left;

gdzie:

rect - To pozycja obracanego obiektu mouse - To pozycja kursora myszy canvasRect - To pozycja płótna

Mając już obliczony punkt, można pobrać informacje o kącie, o jaki powinien zostać obrócony obiekt:

angle = Math.atan2(y, x);

Kąt zwracany jest w radianach.

Przykład

Demo znajdziesz tutaj

HTML:

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

JavaScript

let angle = 0;
const step = 15;
const mouse = { x: 0, y: 0 };

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

document.addEventListener('mousemove', (e) => {
    mouse.x = e.clientX;
    mouse.y = e.clientY;
    const y = rect.y - mouse.y + canvasRect.top;
    const x = rect.x - mouse.x + canvasRect.left;
    angle = Math.atan2(y, x);
});

document.addEventListener('keydown', (e) => {
    rect.x += -step * Math.cos(angle);
    rect.y += -step * Math.sin(angle);
});

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(angle);
    context.fillRect(-rect.width / 2, -rect.height / 2, rect.width, rect.height);
    context.restore();
    requestAnimationFrame(render);
}
render();