僅在其他兩個畫布的 canvas 上繪制重疊像素

Question

我有 2 個相同的畫布，我用鼠標在上面繪制，第 3 個畫布（仍然相同的寬度和高度），我想通過只顯示重疊像素來獲得其他 2 個的“組合”，這意味着具有相同的像素最初 2 個畫布的坐標。

就像是：

const left = document.querySelector('#canvasLeft');
const right = document.querySelector('#canvasRight');
const combined = document.querySelector('#canvasCombined');
        
const draw = () => {
   // do drawing on each canvas...
    
   // get image data from the canvasses...
   const imageDataRight = right.ctx.getImageData(0, 0, right.canvas.width, right.canvas.height);
   const imageDataLeft = left.ctx.getImageData(0, 0, left.canvas.width, left.canvas.height);
    
   // do something with the image data picking only the matching pixels from each canvas --> PLEASE HELP!       
   combined.ctx.putImageData(imageDataCombined, 0, 0);
        
}

更新：請參閱下圖，以更好地解釋我要實現的目標

Answer 1

我相信你想要的是 XOR 復合模式的反面。 您應該通過在“正常”復合模式下將 2 個畫布繪制到第 3 個畫布中來獲得所需的結果。 然后在 XOR 模式下再次繪制。

 let canvas1 = document.getElementById("canvas1"); let canvas2 = document.getElementById("canvas2"); let canvas3 = document.getElementById("canvas3"); let c1 = canvas1.getContext("2d"); let c2 = canvas2.getContext("2d"); let c3 = canvas3.getContext("2d"); // Draw into canvas1 c1.fillStyle = "#000000"; c1.beginPath(); c1.fillRect(0, 0, 60, 60); c1.stroke(); // Draw into canvas2 c2.fillStyle = "#000000"; c2.beginPath(); c2.fillRect(40, 40, 60, 60); c2.stroke(); // Reset composite mode to default c3.globalCompositeOperation = 'source-over'; // Draw 1 and 2 into 3 c3.drawImage(canvas1, 0, 0); c3.drawImage(canvas2, 0, 0); // Turn on xor c3.globalCompositeOperation = 'xor'; // Draw 1 and 2 into 3 again c3.drawImage(canvas1, 0, 0); c3.drawImage(canvas2, 0, 0);

 canvas { border: 1px solid red; }

 <canvas id="canvas1" width="100" height="100"></canvas> <canvas id="canvas2" width="100" height="100"></canvas> <canvas id="canvas3" width="100" height="100"></canvas>

我用一個圓圈試了一下，它在圓角線上的抗鋸齒方面有問題。 這是使用圖像數據的另一種方式。

 let canvas1 = document.getElementById("canvas1"); let canvas2 = document.getElementById("canvas2"); let canvas3 = document.getElementById("canvas3"); let c1 = canvas1.getContext("2d"); let c2 = canvas2.getContext("2d"); let c3 = canvas3.getContext("2d"); // Draw into canvas1 c1.beginPath(); c1.fillRect(0, 0, 60, 60); c1.stroke(); // Draw into canvas2 c2.beginPath(); c2.arc(60, 60, 20, 0, 2 * Math.PI, false); c2.fill(); c2.lineWidth = 1; c2.stroke(); var data1 = c1.getImageData(0, 0, 100, 100); var data2 = c2.getImageData(0, 0, 100, 100); var data3 = c3.getImageData(0, 0, 100, 100); for (let pixel = 0; pixel < data3.data.length; pixel += 4) { if (data1.data[pixel+3] > 0 && data2.data[pixel+3] > 0) { data3.data[pixel] = 0; data3.data[pixel+1] = 0; data3.data[pixel+2] = 0; data3.data[pixel+3] = 255; } } c3.putImageData(data3, 0, 0);

 canvas { border: 1px solid red; }

 <canvas id="canvas1" width="100" height="100"></canvas> <canvas id="canvas2" width="100" height="100"></canvas> <canvas id="canvas3" width="100" height="100"></canvas>