Question

我一直在敲击键盘试图弄清楚为什么来自this tutorial的动画没有正确显示在画布上，如果有的话。在chrome中，它在画布上绘制图像的最左边部分，但在safari中它根本不绘制任何内容。

我尝试了不同的延迟方法，直到图片加载，将脚本标记放在html的不同位置，没有运气。在chrome中调试显示没有错误。

动画的源代码与他在教程中提供的内容并不完全相同，我试图理解它。我已经在它两天了，你会指出它30秒，我想看到这个该死的硬币旋转。

spriteSheet.jpg：

animation.html：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Test Profile Page</title>
</head>

<body>
    <header>
        <h1>Hello</h1>
    </header>
    <nav>
        <ul>
            <li><a href="index.html">Pictures</a></li>
            <li><a href="animation.html">Animation?</a></li>
            <li><a href="cartoon.html">Cartoon</a></li>
        </ul>
    </nav>
    <section>
        <img src="spriteSheet.jpg" />
        <canvas id="coinAnimation"></canvas>    
    </section>
    <footer>

    </footer>
    <script src="animation.js"></script>
</body>
</html>

animation.js：

window.onload = function () {

var spriteSheet = new Image();
spriteSheet.src = "spriteSheet.jpg";

//define sprite class

function sprite (options) {

    var that = {},
        frameIndex = 0,
        tickCount = 0,
        ticksPerFrame = options.ticksPerFrame || 0,
        numberOfFrames = options.numberOfFrames || 1;

    that.context = options.context;
    that.width = options.width;
    that.height = options.height;
    that.image = options.image;
    that.loop = options.loop;

    that.update = function () {

        tickCount += 1;

        if (tickCount > ticksPerFrame) {

          tickCount = 0;

          // If the current frame index is in range
          if (frameIndex < numberOfFrames - 1) {    
            // Go to the next frame
            frameIndex += 1;
          } else if (that.loop) {
            frameIndex = 0;
          }
       }
    };

    that.render = function () {

      // Clear the canvas
      that.context.clearRect(0, 0, that.width, that.height);

      // Draw the animation
      that.context.drawImage(
        that.image,
        frameIndex * that.width / numberOfFrames,
        0,
        that.width / numberOfFrames,
        that.height,
        0,
        0,
        that.width / numberOfFrames,
        that.height);
    };

    return that;

}

var canvas = document.getElementById("coinAnimation");
canvas.width = 100;
canvas.height = 100;

var coin = new sprite({
        context: canvas.getContext("2d"),
        width: 100,
        height: 100,
        image: spriteSheet
});

function gameLoop () {

  window.requestAnimationFrame(gameLoop);

  coin.update();
  coin.render();
}

spriteSheet.addEventListener("load", gameLoop);

}

Answer 1

当您在硬币上输入宽度时，您需要输入整个图像的宽度（似乎是440），而不是单帧的宽度。除此之外，您需要将numberOfFrames设置为10：

var coin = new sprite({
        context: canvas.getContext("2d"),
        width: 440, 
        height: 100,
        image: spriteSheet,
        numberOfFrames: 10
});

注意当它找到单个帧的宽度时，它会width/numberOfFrames找到它，这就是为什么只要输入100它就无法工作的原因。现在你的硬币应该旋转。

Fiddle Example

如果你希望减慢硬币的速度，你可以添加ticksPerFrame: 5例如，越高越快。

HTML5 Canvas动画未显示

1 个答案: