为什么我的动画角色向左滑动？

Question

我正在使用一个简单的 clearInterval 绘制动画来为 spritesheet 设置动画。我有两个动画，并为两者设置了相同的画布大小。我检查了精灵表的宽度以确保它是正确的。由于某种原因，动画执行了，但我的角色向左滑动，并且在重新开始动画之前，下一帧的一部分变得可见。我一遍又一遍地检查错误。希望只是错过了一些简单的事情。这是我的代码。有问题的 Spritesheet 发布在帖子底部的链接中。非常感谢。

// QUIZGAME ANIMATION

var canvasWidth = 200;
var canvasHeight = 250;
var canvas2Height = 250;
var canvas2Width = 200;

var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");

document.addEventListener("DOMContentLoaded", function(event) {
  canvas1.width = canvasWidth;
  canvas1.height = canvasHeight;
  canvas2.height = canvas2Height;
  canvas2.width = canvas2Width;
});

var spriteWidth = 605;
var spriteHeight = 200;

var sprite2Width = 1632;
var sprite2Height = 200;


var columns = 3;
var rows = 1;
var columns2 = 11;
var rows2 = 1;

var width = spriteWidth / columns;
var height = spriteHeight / rows;
var height2 = sprite2Height / rows2;
var width2 = sprite2Width / columns2;

var curFrame = 0;
var curFrame2 = 0;

var frameCount = 3;
var frameCount2 = 11;

var x = 0;
var y = 0;
var x2 = 0;
var y2 = 0;

var frameX = 0;
var frameY = 0;
var frameX2 = 0;
var frameY2 = 0;

var ctx = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");

var character = new Image();
var character2 = new Image();

character.src = "img/testanimation.png";
character2.src = "https://i.stack.imgur.com/7uRCO.png";

function changeFrameIndex() {
  curFrame = ++curFrame % frameCount;
  frameX = curFrame * width;
  ctx.clearRect(x, y, width, height);
}

function changeFrame2Index() {
  curFrame2 = ++curFrame2 % frameCount2;
  frameX2 = curFrame2 * width2;
  ctx2.clearRect(x2, y2, width2, height2);
}

function draw() {
  //Updating the frame 
  changeFrameIndex();
  //Drawing the image 
  ctx.drawImage(character, frameX, frameY, width, height, x, y, width, height);
}

function draw2() {
  changeFrame2Index();
  ctx2.drawImage(character2, frameX2, frameY2, width2, height2, x2, y2, width2, height2);
}

//setInterval(draw, 140); // disabled by editor because source is unavailable
setInterval(draw2, 100);

<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>

spritesheet with issue

我已经部分解决了这个问题，但我仍然有点困惑。我从 spritesheet 的末尾裁剪了一些空白空间（使 sprite2Width = 1604 而不是原来的 1632），这有助于将运动减少到几乎没有，但由于某种原因，我仍然需要澄清 4-6 px 的宽度比实际的 png 短。在将 spritesheet 宽度裁剪为 1604px 并设置 sprite2Width = 1598; 后，动画现在正在工作。 （相对于 1604）。有人知道为什么这里有 6 px 的差异吗？可能与 CSS 相关？至少它正在工作。

Answer 1

在解决此类问题时，您应该做的第一件事就是简化代码...

把它带到最基本的，然后开始使用构建每一帧的变量，是的，就像你发现每个精灵上有一个 6px 的填充，你可以在代码上补偿它，看看宽度的计算。

var character = new Image();
character.src = "https://i.stack.imgur.com/7uRCO.png";

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

var spriteWidth = 1632;
var columns = 11;

var width = (spriteWidth / columns) - 3;
var curFrame = 0;

function draw() {
  ctx.clearRect(0, 0, 900, 900);
  curFrame = ++curFrame % columns;
  ctx.drawImage(character, curFrame * width, 0, width, 200, 0, 0, width, 200);
}

setInterval(draw, 100);

<canvas id="canvas" height=175></canvas>

...为了记录，精灵并不是最好看的