是否有HTML5画布函数用于从链接中绘制图像

Question

我用HTML5画布制作了一个游戏。游戏制作到一半时，我决定把我的游戏精灵变成一艘宇宙飞船。但我很快就了解到，使用c.drawImage函数需要一个图像标记，我不想在HTML中包含图像标记，因为这会破坏我的游戏周围的空白和填充，我不希望为了使用新的精灵而在游戏周围随意添加图像。

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>

那么，有没有一个从链接中绘制图像的功能，或者有没有一种方法可以在不制作图像标签的情况下使该功能发挥作用？

Answer 1

如果在img标记中预加载远程托管的映像并将其隐藏(style属性(，则可以执行此操作：

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

然后在上下文中使用DOMimg：

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

Answer 2

我不确定我是否完全理解为什么你在HTML中使用图像(并使用CSS使其不可见(，但你总是可以将其转换为Base64字符串，并使用JavaScript:将其加载到画布中

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