在 Canvas 中加载图像数组

Question

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

我的代码：

drawCanvas(img, prevProps) {

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


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

// imgArray = [image1, image2, image3]

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

None 这实际上完全涉及 React，除了你需要掌握你正在做的 canvas 参考。

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

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

就是这样。很直接。

在 Canvas 中加载图像数组

Load array of images in Canvas

javascript

canvas

html5-canvas