WEBAPI

settings_applicationsCanvasRenderingContext2D  >   settings_applications[[Prototype]]

WEBAPI

Editing
  • account_tree
  • bug_report

drawImage(HTMLImageElementimg, Numberdx, Numberdy | HTMLImageElementimg, Numberdx, Numberdy, NumberdWidth, NumberdHeight | HTMLImageElementimg, NumbersX, NumbersY, NumbersWidth, NumbersHeight, NumberdX, NumberdY, NumberdWidth, NumberdHeight)

캔버스에 이미지를 그리는 다양한 방법을 제공한다.

설명

캔버스에 그려질 수 있는 이미지의 타입들은 다음과 같다.

구문

기본형식
context.drawImage(img, dX, dY);

캔버스 내에서 이미지가 그려지기 시작할 위치값을 지정한다. 그려지는 이미지의 크기는 실제 이미지 크기만큼 처리된다.

기본형식
context.drawImage(img, dX, dY, dWidth, dHeight);

캔버스 내에서 이미지가 그려지기 시작할 위치값과 크기를 지정한다.

기본형식
context.drawImage(img, sX, sY, sWidth, sHeight, dX, dY, dWidth, dHeight)

캔버스 내에서 이미지가 그려지기 시작할 위치값과 크기를 지정하고 동시에 그려지는 이미지 크기 영역 내에서 실제로 이미지가 시작되는 좌측상단 위치와 가로, 세로 픽셀 수를 조정한다.

매개 변수

Use of parameters type 1
HTMLImageElementimg필수

사용될 이미지 요소를 지정한다. 문서내 DOM에서 찾거나 새롭게 생성하여 지정할 수도 있다.

Numberdx필수

캔버스 내에서 이미지가 그려질 이미지의 좌측 상단의 x 위치값을 캔버스 영역 기준으로 지정한다.

Numberdy필수

캔버스 내에서 이미지가 그려질 이미지의 좌측 상단의 y 위치값을 캔버스 영역 기준으로 지정한다.

Use of parameters type 2
HTMLImageElementimg필수

사용될 이미지 요소를 지정한다. 문서내 DOM에서 찾거나 새롭게 생성하여 지정할 수도 있다.

Numberdx필수

캔버스 내에서 이미지가 그려질 이미지의 좌측 상단의 x 위치값을 캔버스 영역 기준으로 지정한다.

Numberdy필수

캔버스 내에서 이미지가 그려질 이미지의 좌측 상단의 y 위치값을 캔버스 영역 기준으로 지정한다.

NumberdWidth필수

캔버스 내에서 그려질 이미지의 너비를 지정한다.

NumberdHeight필수

캔버스 내에서 그려질 이미지의 높이를 지정한다.

Use of parameters type 3
HTMLImageElementimg필수

사용될 이미지 요소를 지정한다. 문서내 DOM에서 찾거나 새롭게 생성하여 지정할 수도 있다.

NumbersX필수

이미지가 그려지는 위치(dX)에서 캔버스 기준으로 이미지의 좌측 상단이 실제로 시작되는 x 위치를 지정한다. 따라서 이미지가 잘릴 수도 있다.

NumbersY필수

이미지가 그려지는 위치(dY)에서 캔버스 기준으로 이미지의 좌측 상단이 실제로 시작되는 y 위치를 지정한다. 따라서 이미지가 잘릴 수도 있다.

NumbersWidth필수

sX 위치로부터 원래 이미지 가로 픽셀수에서 더하거나 뺄 수 있는 픽셀수이다.

NumbersHeight필수

sY 위치로부터 원래 이미지 세로 픽셀수에서 더하거나 뺄 수 있는 픽셀수이다.

NumberdX필수

캔버스 내에서 이미지가 그려질 이미지의 좌측 상단의 x 위치값을 캔버스 영역 기준으로 지정한다.

NumberdY필수

캔버스 내에서 이미지가 그려질 이미지의 좌측 상단의 y 위치값을 캔버스 영역 기준으로 지정한다.

NumberdWidth필수

캔버스 내에서 그려질 이미지의 너비를 지정한다.

NumberdHeight필수

캔버스 내에서 그려질 이미지의  높이를 지정한다.

테스트 도구

지원 웹브라우저