HTML5 캔버스 복사/붙여 넣기

Question

여러 캔버스를 오버레이하는 그래프 응용 프로그램이 있습니다. 사용자가 이미지를 마우스 오른쪽 버튼으로 클릭하고 저장할 수 있기를 바랍니다. 사용자가 지금이 작업을 수행하면 최상위 레이어 캔버스 (올바르게) 만 저장되지만 하위 레이어는 누락됩니다. 마우스 오른쪽 버튼 클릭이 발생할 때 여러 캔버스를 합성하는 전략은 무엇입니까?

은 사용자가 올바른 이미지를 저장하기 위해 상단 캔버스를 클릭 할 때, 상단 캔버스에 모든 낮은 캔버스를 그릴,

PT

Answer 1

전략이 ​​될 것입니다, 감사합니다.

다른 캔버스에 특정 캔버스를 그리려면 drawImage() 메서드를 사용할 수 있습니다.

여기 ...이 작업을 수행 할 수있는 방법을 보여

var lowerCTX = document.querySelector('#lowerCanvas').getContext('2d'); 
 
var upperCTX = document.querySelector('#upperCanvas').getContext('2d'); 
 

 
//draw rect on lower canvas 
 
lowerCTX.fillStyle = 'green'; 
 
lowerCTX.fillRect(20, 20, 50, 50); 
 

 
//draw rect on upper canvas 
 
upperCTX.fillStyle = 'red'; 
 
upperCTX.fillRect(130, 130, 50, 50); 
 

 
//add right click event to upper canvas 
 
upperCTX.canvas.onmousedown = function(e) { 
 
    if (e.which === 3) { 
 
     //draw lower canvas on upper canvas 
 
     upperCTX.drawImage(lowerCTX.canvas, 0, 0); 
 
    } 
 
};

body{margin:10px 0 0 0;overflow:hidden}#canvas_wrapper{display: inline-flex}canvas{border: 1px solid #ccc}#upperCanvas{margin-left: -202px}

<div id="canvas_wrapper"> 
 
    <canvas id="lowerCanvas" width="200" height="200"></canvas> 
 
    <canvas id="upperCanvas" width="200" height="200"></canvas> 
 
</div>