Javascript 如何在画布的正方形内放置图像？

嗯，我的页面上有一个画布元素，其中将有一个蛇游戏。我正试图用

context.drawImage（）

将一个图像放置在画布的正方形中

下面你可以看到我想要什么：

[

我在上下文中加载的图像代码是：

函数SnakeTexture（上下文，x，y）{
常量纹理=新图像（）；
Texture.src='../../assets/images/snake.png'；
Texture.onload=（）=>{
背景图像（纹理，x，x，16，16）；
}
}
出口{SnakeTexture}；

在主文件上，它们显示在此处：

/*游戏上下文*/
const context=canvasRef.current.getContext（“2d”）；
setTransform（16,0,0,16,0,0）；
clearRect（0,0320320）；
/*蛇式*/
SnakeTexture（上下文，snake[0]，snake[1]）

我试过：

• 加载后放置Texture.src
• 使用URL作为图像src
• 更改纹理的大小

---

我做到了！我正在使用Node.js，所以我安装了一个依赖项调用canvas，我们有一个loadImage函数，所以，我所做的只是：

loadImage（SnakeTexture）。然后（img=>{
snake.forEach（（[x，y]）=>context.drawImage（img，x，y，1，1））；
})