JavaScript的 - 如何加載圖像

Question

只是想知道我怎麼會用JS這樣加載圖像：

Maps.js

{id: 21, colour: 'res/pillar.png', solid: 1, bounce: 
0.30}, /*Loading the image in as an attribute*/ 

的engine.js

/*From draw_tile function*/ 

if (!tile || !tile.colour) return; 
debugger; 
context.drawImage(tile.colour, x, y); 
context.fillRect(
    x, 
    y, 
    this.tile_size, 
    this.tile_size 
); 

----------------------------------- 

/*From draw_map function*/ 

this.draw_tile(t_x, t_y, this.current_map.data[y][x], context); 

控制檯：

tile.colour 
"res/pillar.png" 

屬性正在工作。

但得到這個錯誤 - context.drawImage（）

Engine.js:173 Uncaught 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)' 
at Engine.draw_tile (Engine.js:173) 
at Engine.draw_map (Engine.js:199) 
at Engine.draw (Engine.js:450) 
at Loop (index.html:87) 
at index.html:94 

我可能會很差這樣或那樣，我只是失去了一些東西，但我怎麼在我的方式加載圖像編碼？我也相信我可能需要一個onload（）但是在哪裏？

安迪

Answer 1

提供的值不是類型的 '（CSSImageValue或HTMLImageElement 或SVGImageElement或HTMLVideoElement或HTMLCanvasElement或 ImageBitmap或OffscreenCanvas）'

該錯誤是告訴你，drawImage期望一個圖像（或幾個其他選項） - 不是一個字符串：

var imgTile = new Image(); 
imgTile.src = tile.colour; 
imgTile.onload = function() { 
    context.drawImage(imgTile, x, y) 
}