HTML5 캔버스, 그리기 후 이미지 크기 조절

Question

캔버스에 이미 그려져있는 이미지의 크기를 조절하려고합니다. 다음 코드입니다.

 var canvas = document.getElementById('splash-container'); 
     var context = canvas.getContext('2d'); 
     var imageObj = new Image(); 

     imageObj.onload = function() { 
     // draw image at its original size 
     context.drawImage(imageObj, 0, 0); 
     }; 
     imageObj.src = 'images/mine.jpeg'; 


     // Now let's scale the image. 
     // something like... 
     imageObj.scale(0.3, 0.3); 

어떻게해야합니까?

Answer 1

당신은 잘못 생각하고 있습니다. 이미지를 canvas에 그려 넣으면 imageObj 개체와 아무 관계가 없습니다. 이미 수행 한 작업은 imageObj에 영향을 미치지 않습니다. 이미지 크기를 조정할 경우, drawImage function에서 수행

drawImage(imgObj, 0, 0, imgObj.width * 0.3, imgObj.height * 0.3) 

당신이 스케일링을 애니메이션을 적용 할 또는 처음에 당신이해야 전체 크기로 이미지를 그릴 것을 요구 다른 효과를 달성하기 위해 찾고 있다면 축소 된 이미지를 그리기 전에 먼저 clear it으로 이동하십시오. 말씀을 robertc

Answer 2

는 정확하지만 당신이 정말로 어떤 이유로 그리기 후 캔버스 에 이미지를 확장하기를 원한다면, 당신은 단지 CSS 너비/높이 속성을 사용하여 전체 캔버스를 확장 할 수 있으며, 그것은을 확장 할 것 이미지를 다시 그리지 않아도됩니다.