当尝试用html5 canvas动画一个精灵图像时，奇怪的行为

Weird behavior when trying to Animate a sprite image with html5 canvas

本文关键字：图像 精灵 一个 html5 canvas 动画      更新时间：2023-09-26

这是我的jsfiddle: http://jsfiddle.net/Au6br/2/

你可以看到，动画是奇怪的，这是由于我使用的精灵图像。有人知道任何工作周围修复动画吗?

if (keydown.right) {
    character.x += character.sp;
    character.Pos = 3;
    character.Row++;
    if (character.Row == 4)
        character.Row = 0;
}
if (character.x > (cw-character.w)) {
    character.x = cw - character.w;
}

你的问题是你显然取错了精灵表的部分。

我快速看了一下，你的运行精灵是垂直间隔的，高度为19像素，但你似乎在代码中使用了23。此外，我认为你在使用角色宽度来计算精灵表中图像源的y坐标时出现了错别字，而不是角色的高度。所以把它改成:

ctx.drawImage(charImg, this.Pos * this.w, this.h * this.Row, this.w, this.h, this.x, this.y, this.w, this.h);

并将角色的高度设置为19(即上面的this.h)，您可以到达这里:

http://jsfiddle.net/Au6br/8/

相关文章：