javascript - 我怎样才能在鼠标点击坐标的中间而不是左上角绘制我的 Angular 色？

Question

我有一个游戏，您可以在 2D HTML5 Canvas 上单击以设置 Angular 色移动到的点。单击时，我注意到该字符将出现在鼠标单击位置的右下角。所以我假设 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 处绘制来调整它，如下所示。我似乎得到了与上述类似的结果。嗯？我该怎么办？

这是我的 Angular 色类绘制函数，它由在计时器上运行的 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