HTML5 캔버스 이미지 그리기

HTML5 캔버스는 drawImage()를 사용하여 이미지를 그립니다. 캔버스에 이미지를 그리기 전에 Image 객체를 생성하고 이미지를 메모리에 로드해야 합니다.

HTML5캔버스는 그 위에 이미지를 그리는 옵션이 있습니다. drawImage()를 사용하여:2D上下文 객체에 대한 다양한 기능을 사용하여 이 작업을 수행합니다. drawImage() 기능은 세 가지로 나뉩니다:

drawImage(image, dx, dy);
drawImage(image, dx, dy, dw, dh);
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

첫 번째 매개변수 image은 그려야 할 이미지입니다. 본문의 나중 부분에서 이미지를 생성하고 로드하는 방법을 설명할 것입니다.
dx와 dy 파라미터는 "destinationX"과 "destinationY"의 약자입니다. 이 파라미터는 캔버스에 그리는 이미지의 위치를 결정합니다.
dw와 dh 파라미터는 "destinationWidth"과 "destinationHeight"의 약자입니다. 이 파라미터는 이미지를 그리는 동안 이미지를 확대할 크기를 결정합니다.
sx와 sy 파라미터는 "sourceX"과 "sourceY"의 약자입니다. 이 파라미터는 소스 이미지에서 어디서부터 이미지의 다각형을 캔버스에 복사할지 결정합니다.
sw와 sh 파라미터는 "sourceWidth"과 "sourceHeight"의 약자입니다.

이미지 생성 및 로드

캔버스에 이미지를 그리기 전에 Image 객체를 생성하고 이미지를 메모리에 로드해야 합니다. 이는 JavaScript로 완료할 수 있는 방법입니다:

var image = new Image();
image.src = "https://ko.oldtoolbag.com/en/run/html/canvas-shot.png";

는 이미지가 완전히 로드되기 전에 그려져야 합니다. 이미지가 완전히 로드되었는지 확인하려면 이미지에 이벤트 리스너를 추가하세요. 이미지를 로드할 때 이 이벤트 리스너가 호출됩니다. 이렇게 보입니다:

image.addEventListener(' load' drawImage1);

이 drawImage1파라미터는 이벤트가 발생할 때 호출되는 함수입니다.
이는 캔버스에 생성하고, 로드하고 그리는 전체 코드 예제입니다:

window.onload = function() {
　　　　drawEx1();
}
var image1　= null;
function drawEx1() {
　　　　image1　= new Image();
　　　　image1.src =
　　　　　　　　"https://ko.oldtoolbag.com/en/run/html/canvas-shot.png";
　　　　image1.addEventListener(' load' drawImage1);
}
function drawImage1() {
　　　　var canvas = document.getElementById("ex1");
　　　　var context = canvas.getContext("2d");
　　　　context.drawImage(image1,　10,　10);
}

위의 코드가 캔버스에 그린 결과입니다:

HTML5 캔버스가 지원되지 않음

확대한 이미지

본문의 시작 부분에서 설명한 것처럼, 그림을 그리는 동안 이미지를 확대할 수 있습니다. 이는 그림을 그리고 확대하는 코드 예제입니다. 이 예제는 이미지를200의 너비와100픽셀의 높이:

var width =　200;
var height =　100;
context.drawImage(image2,　10,　10, width, height);

이는 캔버스에서 그리는 동안 이미지의 외관입니다. 확대된 너비와 높이를 가집니다:

HTML5 캔버스가 지원되지 않음

이미지의 일부를 그리기

캔버스에 이미지의 일부만 그릴 수 있습니다. 그린 부분은 이미지에서 복사한 사각형입니다. 이는 코드 예제입니다:

var dx =　10;
var dy =　10;
var dw =　75;
var dh =　75;
var sx =　20;
var sy =　20;
var sw =　75;
var sh =　75;
context.drawImage(image3, sx, sy, sw, sh, dx, dy, dw, dh);

sx, sy, sw 및 sh(사각형 시작을 선언한 sx, sy) 이미지, 그리고 너비(sw)와 높이(sh)의 사각형입니다.

이는 캔버스에서 그리는 동안 이미지 사각형의 외관입니다:

HTML5 캔버스가 지원되지 않음