您可以将一个特定区域从一个画布复制到另一个画布吗？

Question

截至目前，我在屏幕外画布上渲染一张地图，然后将其复制到主帆布中，因此我不必在地图上重新渲染每个框架上的每个对象，wich真的变得很懒惰，我的远场帆布需要相对较大以适合整个地图，整个画布都会被复制到普通的癌症上，每个框架也不是那样的表现，所以我的问题是：有什么方法可以将画布的一部分复制到另一个画布上，所以我不必复制整个东西？

Answer 1

您可以

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const offscreen = Object.assign(
  document.createElement("canvas"),
  { width: 2500, height: 2500 }
);
makeNoise(offscreen.getContext("2d"));

canvas.onmousemove = evt => {
  const x = evt.clientX - canvas.offsetLeft;
  const y = evt.clientY - canvas.offsetTop;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(offscreen, x - offscreen.width / 2, y - offscreen.height / 2);
}

// fills a context with noise,
// we use it only to draw somehing on the offscreen canvas
function makeNoise(ctx) {
  const img = new ImageData(ctx.canvas.width, ctx.canvas.height);
  const data = new Uint32Array(img.data.buffer);
  for (let i = 0; i<data.length; i++) {
    data[i] = Math.random() * 0xFFFFFF + 0xFF000000;
  }
  ctx.putImageData(img, 0, 0);
}

Use your mouse to move the offscreen canvas<br>
<canvas><canvas>

Answer 2

/code>

允许您根据X/y坐标提取图像数据和宽度＆amp;身高，

允许您将其放在X/Y坐标处。

或使用

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)