javascript - 如何在鼠标点击坐标的中间而不是左上角绘制我的角色？

Question

我有一个游戏，您可以在其中单击 2D HTML5 画布来设置角色移动到的点。当我点击时，我注意到角色会出现在鼠标点击位置的右下角。所以我假设 context.drawImage() 的 x,y 坐标参数用于从哪里开始绘制图像的左上角。根据这个规范，我是对的：http: //www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#drawing-images-to-the-canvas

我试图通过在 centerX 和 centerY 处绘制来调整它，如下所示。我似乎得到了与上述类似的结果。嗯？我应该怎么办？

这是我的角色类绘制函数，它由在计时器上运行的 update() 调用。

this.Draw = function () {
    // var centerX = this.currentX + (this.avatarWidth/2);
    // var centerY = this.currentY + (this.avatarHeight/2);
    // console.log("hermes' supposed draw location = " + centerX + "," + centerY + " | currentX,Y = " + this.currentX + "," + this.currentY);
    // console.log("currentX,Y = " + this.currentX + "," + this.currentY);
    context.drawImage(hermesAvatar, this.currentX, this.currentY, this.avatarWidth, this.avatarHeight);
}; // end draw fxn

Answer 1

减去，不加，宽度和高度的一半：

this.Draw = function () {
    var centerX = this.currentX - this.avatarWidth / 2;
    var centerY = this.currentY - this.avatarHeight / 2;
    // console.log("hermes' supposed draw location = " + centerX + "," + centerY + " | currentX,Y = " + this.currentX + "," + this.currentY);
    // console.log("currentX,Y = " + this.currentX + "," + this.currentY);
    context.drawImage(hermesAvatar, centerX, centerY, this.avatarWidth, this.avatarHeight);
}; // end draw fxn