畫布未繪制圖像

Question

我的畫布有問題，我正在嘗試繪制圖像，但無法正常工作，因為您可以看到我正在將圖像加載到數組中，並等待所有加載完成，因為我每次迭代都更改圖像但未繪制任何圖像，請看一下我的代碼。 我找不到錯誤:(

(() => {
  "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 id="canvas"></canvas>

Answer 1

您需要給畫布一個寬度和高度。

使用占位符圖像：

 (() => { "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> 

根據您的操作，您可能需要清除渲染之間的畫布。

 (() => { "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>