這個問題在這里已經有了答案： 如何在本地將一個畫布的內容復制到另一個畫布 2 個答案 2 小時前關閉。
截至目前，我將地圖一次渲染到螢屏外畫布，然后每幀都將其復制到主畫布，因此我不必每幀都重新渲染地圖上的每個物件，這真的很滯后，我的螢屏外畫布需要相對較大以適合整個地圖，并且整個畫布被復制到正常的畫布上，每一幀也不是那么高效，所以我的問題是；有沒有辦法只將畫布的一部分復制到另一個畫布，所以我不必復制整個東西？
uj5u.com熱心網友回復：
你可以drawImage你的畫布：
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>uj5u.com熱心網友回復：
getImageData(sx, sy, sw, sh)
允許您根據 X/Y 坐標和寬度和高度提取影像資料，以及
putImageData(imageData, dx, dy)
允許您將其放置在 X/Y 坐標處。
或者使用drawImage，它允許您直接使用現有畫布作為“輸入”，并且您可以為原點和目標指定 X/Y 和寬度/高度：
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/491219.html
標籤：javascript html 打字稿 帆布