1

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
4

1 に答える 1

2

幅と高さの半分を減算し、加算しないでください。

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
于 2012-04-12T23:06:19.930 に答える