Canvas 未绘制图像

Question

我在使用 canvas 时遇到问题，我正在尝试绘制图像，但无法正常工作，正如您所看到的，我正在将图像加载到数组中，然后等待所有图像加载完毕，我正在更改我的图像每次迭代但不绘制任何图像，请查看我的代码。我找不到错误:(

(() => {
  "use strict";

  const images = [];
  const promises = [];
  const url = './assets/';
  const canvas = document.getElementById("canvas");
  const context = canvas.getContext("2d");
  const FPS = 30;
  const INTERVAL = 10000 / FPS;

  const canvasDraw = () => {
    let i = 0;

    setInterval(() => {
      context.drawImage(images[i] , 300, 300);
      i++;
      if (i === images.length) i = 0;
    }, INTERVAL);
  };

  const loadImage = (image) => {
    return new Promise((resolve) => {
      const img = new Image();

      img.src = url + image + '.png';
      img.onload = function () {
        images.push(img);
        resolve();
      };
    });
  };

  for(let i = 1; i < 14; i++) {
    promises.push(loadImage(i));
  }

  Promise
    .all(promises)
    .then(() => {
      canvasDraw();
    });
})();

我的 html 文件包含 canvas 像这个

<canvas id="canvas"></canvas>

Answer 1

您需要为 canvas 指定宽度和高度。

使用占位符图像：

(() => {
  "use strict";

  const images = [];
  const promises = [];
  const url = './assets/';
  const canvas = document.getElementById("canvas");
  const context = canvas.getContext("2d");
  const FPS = 30;
  const INTERVAL = 10000 / FPS;

  const canvasDraw = () => {
    let i = 0;

    setInterval(() => {
      context.drawImage(images[i] , 0, 0);
      i++;
      if (i === images.length) i = 0;
    }, INTERVAL);
  };

  const loadImage = (image) => {
    return new Promise((resolve) => {
      const img = new Image();

      img.src = 'https://placehold.it/' + (image * 20) + 'x' + (image * 20);
      img.onload = function () {
        images.push(img);
        resolve();
      };
    });
  };

  for(let i = 1; i < 14; i++) {
    promises.push(loadImage(i));
  }

  Promise
    .all(promises)
    .then(() => {
      canvasDraw();
    });
})();

<canvas id="canvas" width="300" height="300"></canvas>

根据您的操作，您可能需要清除渲染之间的 canvas。

(() => {
  "use strict";

  const images = [];
  const promises = [];
  const url = './assets/';
  const canvas = document.getElementById("canvas");
  const context = canvas.getContext("2d");
  const FPS = 30;
  const INTERVAL = 10000 / FPS;

  const canvasDraw = () => {
    let i = 0;

    setInterval(() => {
      context.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
      context.drawImage(images[i] , 0, 0);
      i++;
      if (i === images.length) i = 0;
    }, INTERVAL);
  };

  const loadImage = (image) => {
    return new Promise((resolve) => {
      const img = new Image();

      img.src = 'https://placehold.it/' + (image * 20) + 'x' + (image * 20);
      img.onload = function () {
        images.push(img);
        resolve();
      };
    });
  };

  for(let i = 1; i < 14; i++) {
    promises.push(loadImage(i));
  }

  Promise
    .all(promises)
    .then(() => {
      canvasDraw();
    });
})();

<canvas id="canvas" width="300" height="300"></canvas>

Canvas 未绘制图像

Canvas is not drawing images

html

javascript

canvas

image

draw