是否有用於從鏈接中繪制圖像的 HTML5 canvas function？

Question

我正在使用 HTML5 canvas 制作游戲。 在制作游戲的中途，我決定將我的游戲精靈更改為宇宙飛船。 但正如我很快了解到的那樣，您需要有一個圖像標簽才能使用 c.drawImage function 並且我不想在我的 Z4C4AD5FCA2E7A3F74DBB1CED00381AA4 周圍包含一個圖像標簽，因為它不想破壞我的游戲和填充隨機圖像點綴在我的游戲周圍，只是為了使用新的精靈。

 const canvas = document.getElementById("game") let c = canvas.getContext("2d") c.drawImage("https://heckapix.com/images/spaceship-clipart-with-background.jpg", 20, 20)

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

那么是否有 function 可以從鏈接中繪制圖像，或者有沒有辦法讓 function 在不制作圖像標簽的情況下工作？

Answer 1

如果您在img標記中預加載遠程托管的圖像並將其隱藏（ style屬性），則可以執行此操作：

<img id="my-image" src="https://heckapix.com/images/spaceship-clipart-with-background.jpg" style="display: none; visibility: hidden;">

然后在上下文中使用 DOM img ：

let img = document.getElementById('my-image');
c.drawImage(img, 20, 20)

Answer 2

I'm not sure I fully understand why you're using the image in the HTML (and using CSS to make it invisible), but you can always convert it to a Base64 string, and load it into the canvas using JavaScript:

let img = new Image();
img.src = 'data:image/png;base64, VBORw0KGgoAAAANSUhEUgAAAAUAAAAFCCNbyblAA....==';
c.drawImage(img);