Холст показывает, но изображение не отображается - PullRequest
Новая
       5

Холст показывает, но изображение не отображается

0 голосов
/ 25 апреля 2018

Я пытался создать спрайт-анимацию вращающейся книги, но она не работает. Холст работает нормально, другой скрипт работает, но книжный скрипт не работает. Остальная часть страницы работает совершенно нормально, но я пропустил дополнительный код, поскольку они не нуждаются в каких-либо исправлениях.

В чем проблема? Заранее спасибо 

function myFunction() {
  document.getElementById("changeBox").style.backgroundColor = "black";
  document.getElementById("changeBox").style.fontSize = "40px";
  document.getElementById("changeBox").style.textAlign = "center";
  document.getElementById("showDate").innerHTML = Date();

}

function bookAnimation() {

  var book,
    bookImage,
    canvas;

  var c = document.getElementById("Book");


  function gameLoop() {

    window.requestAnimationFrame(gameLoop);

    book.update();
    book.render();
  }

  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.update = function() {

      tickCount += 1;

      if (tickCount > ticksPerFrame) {

        tickCount = 0;

        if (frameIndex < numberOfFrames - 1) {
          frameIndex += 1;
        } else {
          frameIndex = 0;
        }
      }
    };

    that.render = function() {

      that.context.clearRect(0, 0, that.width, that.height);


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

    return that;
  }

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

  bookImage = new Image();

  book = sprite({
    context: canvas.getContext("2d"),
    width: 1000,
    height: 100,
    image: bookImage,
    numberOfFrames: 10,
    ticksPerFrame: 4
  });

  bookImage.addEventListener("load", gameLoop);
  bookImage.src = "E:\Second Year\cwd2018\Book Sprite.png";
}
<div style="background-color:black">
  <div style="text-align:center;">
    <input type="button" value="Welcome to Login Page" id="changeBox" onclick="myFunction()">
    <p id="showDate"></p>
    <canvas id="Book" width="200" height="200" style="background-color: yellow"></canvas>
  </div>
</div>
...