javascript - 类型错误 : Failed to execute 'drawImage' on 'CanvasRenderingContext2D' : The provided value is not of type '(CSSImageValue or HTMLImageElement

Question

使用完全相同的代码执行教程，但在尝试将图像绘制到 Canvas 时将此错误发送到控制台:

SpriteSheet.js:30 Uncaught (in promise) TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)

不知道为什么会这样？第一张图片在 Canvas 上绘制得很好，但第二张图片没有显示并出现此错误。使用 promises 以便在使用之前加载所有图像，对吗？如果我将 script.js 文件的末尾更改为 drawBackground(level.backgrounds[1], context, sprites);

，它会正常工作

script.js

import SpriteSheet from './SpriteSheet.js';
import {loadImage, loadLevel} from './loaders.js';

function drawBackground(background, context, sprites) {
    background.ranges.forEach(([x1, x2, y1, y2]) => {
        for (let x = x1; x < x2; ++x) {
            for (let y = y1; y < y2; ++y) {
                sprites.drawTile(background.tile, context, x, y);
            }
        }
    });
}

function loadBackgroundSprites() {
  return loadImage('SEA01.png').then(image => {
    const sprites = new SpriteSheet(image, 16, 16);
    sprites.define('ocean', 0, 0);
    return sprites;
});
  return loadImage('ground.png').then(image=> {
    const sprites = new SpriteSheet(image, 16, 16);
    sprites.define('ground', 12, 0);
  });
}

const canvas = document.getElementById('gamearea');
const context = canvas.getContext('2d');

Promise.all([
  loadBackgroundSprites(),
  loadLevel('1-1')
]).then(([sprites,level]) => {
  console.log(level);
  drawBackground(level.backgrounds[0], context, sprites);
});

loader.js

export function loadImage(url) {
    return new Promise(resolve => {
        const image = new Image();
        image.addEventListener('load', () => {
            resolve(image);
        });
        image.src = url;
    });
}

export function loadLevel(name) {
    return fetch(`/levels/${name}.json`)
    .then(r => r.json());
}

spritesheet.js

export default class SpriteSheet {
    constructor(image, w = 16, h = 16) {
        this.image = image;
        this.width = w;
        this.height = h;
        this.tiles = new Map();
    }

    define(name, x, y) {
        const buffer = document.createElement('canvas');
        buffer.height = this.height;
        buffer.width = this.width;
        buffer
            .getContext('2d')
            .drawImage(
                this.image,
                this.width * x,
                this.height * y,
                this.width,
                this.height,
                0,
                0,
                this.width,
                this.height);
        this.tiles.set(name, buffer);
    }

    draw(name, context, x, y) {
        const buffer = this.tiles.get(name);
        context.drawImage(buffer, x, y);
    }

    drawTile(name, context, x, y) {
        this.draw(name, context, x * this.width, y * this.height);
    }
}

1-1.json

{
    "backgrounds": [
        {
            "tile": "ocean",
            "ranges": [
                [
                    0, 50,
                    0, 25
                ]
            ]
        },
        {
            "tile": "ground",
            "ranges": [
                [
                    18, 25,
                    10, 15
                ]
            ]
        }
    ]
}

提前致谢。

编辑:

我更新了我的代码以在不同的函数中加载图像，但得到了同样的错误:

脚本.js

import SpriteSheet from './SpriteSheet.js';
import {loadImage, loadLevel} from './loaders.js';

const canvas = document.getElementById('gamearea');
const context = canvas.getContext('2d');

function drawBackground(background, context, sprites) {
    background.ranges.forEach(([x1, x2, y1, y2]) => {
        for (let x = x1; x < x2; ++x) {
            for (let y = y1; y < y2; ++y) {
                sprites.drawTile(background.tile, context, x, y);
            }
        }
    });
}

function drawMario(background, context, mario) {
    background.ranges.forEach(([x1, x2, y1, y2]) => {
        for (let x = x1; x < x2; ++x) {
            for (let y = y1; y < y2; ++y) {
                mario.drawTile(background.tile, context, x, y);
            }
        }
    });
}

function loadBackgroundSprites() {
  return loadImage('SEA01.png').then(image => {
    const sprites = new SpriteSheet(image, 16, 16);
    sprites.define('ocean', 0, 0);
    return sprites;
  });
}

function loadDirtSprite() {
  return loadImage('ground.png').then(image => {
    const mario = new SpriteSheet(image, 16, 16);
    mario.define('ground', 12, 0);
    return mario;
  });
}



Promise.all([
  loadBackgroundSprites(),
  loadLevel('1-1'),
  loadDirtSprite()
]).then(([sprites, level, mario]) => {
  level.backgrounds.forEach(background => {
    drawBackground(background, context, sprites, mario);
  });
  mario.draw('ground', context, 1, 16);
});

Answer 1

替换答案:

错误编号 1。

问题评论中提到，原代码在loadBackgroundSprites中有错误:

function loadBackgroundSprites() {
  return loadImage('SEA01.png').then(image => {
    const sprites = new SpriteSheet(image, 16, 16);
    sprites.define('ocean', 0, 0);
    return sprites;
});                                  // <-- bad indent
  return loadImage('ground.png').then(image=> {
    const sprites = new SpriteSheet(image, 16, 16);
    sprites.define('ground', 12, 0);
  });
}

中间标记为“错误缩进”的行是在 loadBackgroundSprites 开头开始的 return 语句结束并且执行返回给调用者的地方。 “错误缩进”行之后的 return 语句永远不会执行并生成一条控制台消息。

⚠ unreachable code after return statement [Learn More]

因为警告不是致命的，函数返回没有错误。

此错误的第一个修复是删除无法访问的代码。正如下一个错误中所讨论的那样，还需要进行两个额外的修复。

• 将加载的 URL 更改为 sprite 表文件的 URL(尚待准备)，
• 在 loadImage 的 promise 处理程序中定义“海洋”和“地面”图 block

错误编号 2。

SpriteSheet 类的实例包含一个图像，作为参数传递给构造函数。此图像应包含一组固定宽度和高度的矩形图 block ，这些矩形图 block 与构造函数调用中使用的第二个和第三个参数值相匹配。这不是你在做什么。

实际上，在 SpriteSheet 实例中定义一个图 block 会将单个图 block 从 sprite 表图像复制到一个新的命名 Canvas 对象中，以供绘图函数使用。

按照设计使用 sprite 表的建议补救措施是创建一个背景 sprite 表图像，其中至少包含海洋和地面的两个 16x16 block 。它们在 sprite 表图像中的位置(计算从左到右和自上而下的图 block )决定了在 loadBackgroundSprites 中应如何对图 block 定义进行编码。

对于此解决方案，删除对 dirtSprite 的代码引用。并删除对“SEA01.png”和“ground.png”的图像引用 - loadBackgroundSprites 应该加载包含两个图 block 的组合 Sprite 表的 URL。

在 Promise.all 链中使用 forEach 版本的代码根据 json 文件渲染 Sprite :

Promise.all([
  loadBackgroundSprites(),
  loadLevel('1-1')
]).then(([sprites,level]) => {
  console.log(level);
  level.backgrounds.forEach(background => {
    drawBackground(background, context, sprites)
  });

---

我希望对本教程有所帮助。