在 Canvas 中加载图像数组

Question

我想加载一组图像到 canvas 但不知道如何实现。 如果我能得到一些关于如何实现它的指示，我将不胜感激。 我在 React 上使用基于类的组件。

我的代码：

drawCanvas(img, prevProps) {

const node = this.canvasRef.current;
const context = node.getContext("2d");


context.drawImage(img, 0, 0);
}

// imgArray = [图像 1, 图像 2, 图像 3]

componentDidUpdate(prevProps) {

  const imageArray = Array.from(imgArray).map((image) => image)

  console.log(imageArray)
  
  var img = new Image();
  img.src = this.props.image;
  img.onload = () => this.drawCanvas(img, prevProps);
}

Answer 1

除了您需要获取您正在做的 canvas 参考之外，这一切都与 React 无关。

如果您已经有了图像对象数组，那实际上非常简单。 只需为数组中的每个图像调用drawImage() 。 在开始绘制它们之前，您可能需要清除它们，这样最后的那些就不会流血并造成怪异。

context.clearRect(0, 0, canvas.width, canvas.height);
imageArray.forEach(image => {
  context.drawImage(image, 0, 0);
});

就是这样。 非常简单。