Question

我有一个朝着以下方向行进的船只：

class Vessle{
    constructor() {
        this.position = {
            x: this.rnd(bound.width),
            y: this.rnd(bound.height),
            dx: this.rnd(5),
            dy: this.rnd(5)
        }
    }
    rnd(val) {return val * Math.random()}
    move(){
        this.position.x += this.position.dx;
        this.position.y += this.position.dy;    
    }
}

在画布上绘制图像时，我想旋转图像，使其指向行进方向：

    drawImage(pos){
        let w = this.img.naturalWidth,
            h = this.img.naturalHeight
        this.ctx.save();
        this.ctx.translate(pos.x+w/2, pos.y+h/3);
        this.ctx.rotate(Math.atan(pos.dx,pos.dy));
        this.ctx.translate(-pos.x-w/2, -pos.y-h/3);
        this.ctx.drawImage(this.img, pos.x, pos.y);
        this.ctx.restore();
    }

这应该在此行中完成：

this.ctx.rotate(Math.atan(pos.dx,pos.dy));

他们指向我的方向不一致（不是所有人都指向错误的90度，等等）我的单位错了吗？

Answer 1

获取点与点之间的角度（以度为单位）的最简单方法：

var angleDeg = Math.atan2(point2.y - point1.y, point2.x - point1.x) * 180 / Math.PI;

如果我是正确的话，那么您将在上一个轮换的“顶部”旋转，因此您应该考虑到这一点。

从dx，dy计算方向？

1 个答案: