drawImage() implementation

Question

크기가 다른 두 개의 캔버스가 있습니다. 내 목표는 사용자의 그림을 기본 캔버스에서 두 번째 캔버스로 축소 된 버전으로 복사하는 것입니다. 지금까지 drawImage()와 scale은 작동하는 것처럼 보였지만 두 번째 캔버스는 이전 버전의 기본 도면을 새 사본과 함께 유지합니다. 나는 drawImage()를 호출하기 전에 매번 그것을 지우려고했지만 아무 것도하지 않는 것으로 보입니다. 함수를 실행할 때마다 현재 이미지를 보조 캔버스로 어떻게 복사 할 수 있습니까?

$('#hand').dblclick(function(){ 
var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
//var imageData = context.getImageData(0, 0, 100, 100); 
var newCanvas = document.getElementById('scaledCanvas'); 
var destCtx = newCanvas.getContext('2d'); 
destCtx.clearRect(0, 0, newCanvas.width, newCanvas.height); 
destCtx.scale(.5,.5); 
destCtx.drawImage(canvas, 0, 0); 
}); 

필요한 경우 더 많은 코드를 포함 할 수 있습니다. 나는 또한 저울이 계속 호출됨을 깨달았습니다. 이것은 새로운 복사 된 이미지가 매번 작아지는 이유를 설명합니다. 그래서 또 다른 문제점이 될 수 있습니다.

Answer 1

실제로 매우 간단합니다. 변환 (변환, 회전 또는 비율 조정)을 사용하고 있습니다.

매번 캔버스 상태를 저장하고 복원해야 할 때마다 "새롭게"사용하기 위해.

$('#hand').dblclick(function(){ 
var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
//var imageData = context.getImageData(0, 0, 100, 100); 
var newCanvas = document.getElementById('scaledCanvas'); 
var destCtx = newCanvas.getContext('2d'); 
destCtx.clearRect(0, 0, newCanvas.width, newCanvas.height); 

//save the current state of this canvas' drawing mode 
destCtx.save(); 

destCtx.scale(.5,.5); 
destCtx.drawImage(canvas, 0, 0); 

//restore destCtx to a 1,1 scale (and also 0,0 origin and 0 rotation) 
destCtx.restore(); 

}); 

이

은 국가 및 변환의 설명에 봐 ... 당신이 등 재귀 함수를 사용하여 많은 멋진 기하학적 트릭을 수행하기 위해, 복원 호출하기 전에 여러 번 밀어 수 있습니다주의하는 것도 중요 : https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Transformations

희망 사항은 캔버스 변환을 조금 더 잘 이해할 수 있기를 바랍니다.