[Javascript]:精灵是偏移的

[Javascript]: Sprite is offset

本文关键字：精灵 Javascript      更新时间：2023-09-26

所以我用JavaScript编写了一些游戏（或者我称之为游戏）。基本上，你应该点击画布上的一个地方，玩家就会被画在那里。但是当我点击时，精灵被偏移了一些（我不知道到底是多少）到鼠标上的点。我怎样才能得到它，以便精灵将准确地绘制在鼠标的点上？

图片链接：https://i.stack.imgur.com/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);
}

如果子画面是 15x15，则希望 srcX 和 srcY 为 0，而不是 1。请注意，您的代码在鼠标点处绘制精灵的左上角;如果你想让它居中，你需要做：

drawX = mouseX - width / 2;
drawY = mouseY - height / 2;
相关文章：