javascript - 如何将图像放置在正方形画布内？

Question

好吧，我的页面上有一个画布元素，其中将是一个蛇游戏。我正在尝试将一张图像放在画布的正方形内，并带有context.drawImage().

波纹管你可以看到我想要什么：

[

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

function SnakeTexture(context, x, y) {
  const Texture = new Image();
  Texture.src = '../../assets/images/snake.png';
  Texture.onload = () => {
    context.drawImage(Texture, x, x, 16, 16);
  }
}

export { SnakeTexture };

在主文件中，它们出现在此处：

/* GAME CONTEXTS */
const context = canvasRef.current.getContext("2d");
context.setTransform(16, 0, 0, 16, 0, 0);
context.clearRect(0, 0, 320, 320);

/* SNAKE STYLE */
SnakeTexture(context, snake[0], snake[1])

我努力了：

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

标签： javascriptnode.jsreactjscanvas

Answer 1

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

loadImage(SnakeTexture).then(img => {
   snake.forEach(([x, y]) => context.drawImage(img, x, y, 1, 1));
})