javascript - Image Sprites 看起来起伏不定/生涩

Question

我正在尝试将图像动画化到 Canvas 上。

在 html 文件中我有 dog.png，它是一个 Image Sprites。

<img id="dog" src="images/dog.png" alt="dog" />

在 CSS 文件中:

#dog{
    object-position: 0 0;
    width: 50px;
    height: 50px;
}

在 javascript 中有一个函数:

$("#dog").css("object-position",(incrementNum*-60) +"px 0");

其中 incrementNum 从 0 开始。

问题是图像动画变得断断续续。

如何使图像看起来好看？谢谢

Answer 1

糟糕，我才意识到 documentGetElementById 获取了整个 sprite 图像并且没有应用 css。这就是为什么断断续续的图像实际上是一个被挤压成 50 x 50 像素的长图像