캔버스 drawimage draw zoom image

Question

코드를 사용하여 캔버스 크기를 설정하고 drawImage를이 캔버스에 설정해야합니다. 그려진 이미지는 확대 된 문제입니다.

코드는 다음 -

currentImageDIV = $("#cnv").css({ "position" : "relative" ,"height": 400, "width": 800,"top" :"100px" , "border": "1px solid red" }); 

var c = document.getElementById("cnv"); 
var ctx = c.getContext("2d"); 
ctx.imageSmoothingEnabled = false; 

var img = new Image(); 
img.src = "/images/sample2.jpg"; 
img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
} 

내가 확대하지 예상대로 그려지는 이미지보다 캔버스 크기를 설정하지 않은 경우.

drawImage 확대/축소 이미지없이 캔바스 크기를 제어하려면 어떻게해야합니까?

Answer 1

나는 하드 코드 번호 줌보다 캔버스 태그의 폭 및 높이가 진행되는 경우 있음을 발견했다.

이에 대한 또 다른 해결책은 소품보다는 CSS를 이용하여 폭 및 높이를 설정하는 (예 $ ("# CNV") 소품 ({ "폭"800 "높이"(600)}.);)