Вращение прямоугольника на основе положения мыши X и Y

Question

Я работаю над этим и пытаюсь заставить его работать, но теперь я довольно сильно запятнал.

Я хочу, чтобы этот прямоугольник следовал за этой позицией мыши и правильно вращался. Это происходит за мышью, но мой поворот на угол кажется выключенным. Любая помощь или руководство, я не уверен, что я делаю неправильно здесь.

Вот код, который имеет угол в нем:

function createBoat() { 
    var angle = Math.atan2(
      boat.y - mousePos.y, 
      boat.x - mousePos.x 
     ) * 180/Math.PI; 
    ship_context.rotate(angle); 
    ship_context.fillRect(boat.x, boat.y, boat.width, boat.height); // create some shape, there is nothing on the canvas yet 
} 

Вот мой цикл

function loop() { 
    ship_context.clearRect(0, 0, window.innerWidth, window.innerHeight); 
    moveBoat(); 
    time = Date.now(); 
    createBoat(); 

    setTimeout(loop, 1000/60); 
} 

Вот демо: http://staging.interactivemechanics.com/chop/row3.html

---

Кроме того, Sidenote, я работаю с основными формами прямо сейчас. Но я планирую перевести все на изображения. Прямоугольник будет лодкой, и у меня есть отдельная страница, где у меня есть листья в пруду. У меня есть эта часть, работающая с обнаружением столкновения. Я хочу знать, лучше ли использовать библиотеку здесь или я должен придерживаться холста?

Вот другая демонстрация: http://staging.interactivemechanics.com/chop/row2.html с движущимся материалом

Answer 1

Если вы хотите повернуть только лодку, сначала необходимо перевести (назовем его зацикливается) в положение холста, и повернуть на тот момент , Для того, чтобы избежать вашего корабля через поворот, нам также необходимо сбросить вращение после того, как мы закончили рисовать корабль

Попробуйте это:

function createBoat() { 
    var angle = Math.atan2(
      boat.y - mousePos.y, 
      boat.x - mousePos.x 
     ) * 180/Math.PI; 
    ship.context.save(); //save the settings of the canvas 
    ship_context.translate(boat.x+boat.width/2,boat.y+boat.height/2); //move focus to boat position (middle of the boat) 
    ship_context.rotate(angle); 
    ship_context.fillRect(-boat.width/2, -boat.height/2); // create some shape, there is nothing on the canvas yet 
    ship_context.restore(); //putting everything back in place 
}