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

另外，旁注，我正在使用基本形状。但我计划将所有内容翻译成图像。矩形将是一条船，我有一个单独的页面，我在池塘里移动。我也有那部分使用碰撞检测。我想知道在这里使用库是否更好，或者我是否应该坚持使用画布？

这是另一个演示：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
}

根据鼠标X和Y位置旋转矩形

1 个答案: