javascript - [Javascript] : Sprite is offset

Question

所以我正在用 JavaScript 编写一些游戏(或者我所说的游戏)。基本上，您应该单击 Canvas 上的某个位置，然后玩家就会被绘制到那里。但是当我单击时， Sprite 会向鼠标上的点偏移一定量(我不确切知道多少)。我怎样才能让 Sprite 准确地绘制在鼠标点上？

图片链接:/image/lmSKz.jpg

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.addEventListener('mousemove', mouseMoved, false);
canvas.addEventListener('click', drawPlayerPos, false);

var spriteSheet = new Image();
spriteSheet.src = 'spritesheet.png';
spriteSheet.addEventListener('load', init, false);

var gameWidth = canvas.width;
var gameHeight = canvas.height;

function init()
{
    drawPlayerPos();
}


var mouseX;
var mouseY;

function mouseMoved(e)
{
    mouseX = e.pageX - canvas.offsetLeft;
    mouseY = e.pageY - canvas.offsetTop;
    document.getElementById('mouseCoors').innerHTML = 'X: ' + mouseX + ' Y: ' + mouseY;
}

function drawPlayerPos()
{
    var srcX = 1;
    var srcY = 1;
    var drawX = mouseX;
    var drawY = mouseY;
    var width = 15;
    var height = 15;
    ctx.drawImage(spriteSheet,srcX,srcY,width,height,drawX,drawY,width,height);
}

Answer 1

如果 Sprite 是 15x15，您希望 srcX 和 srcY 为 0，而不是 1。请注意，您的代码在鼠标点；如果你想让它居中，你需要这样做:

drawX = mouseX - width / 2;
drawY = mouseY - height / 2;