HTML 캔버스 drawImage() 메서드

정의와 사용법

drawImage() 메쉬에서 이미지, 메쉬 또는 비디오를 그립니다.

drawImage() 메서드는 이미지의 일부를 그리거나, 또는 이미지의 크기를 증가하거나 감소시키기도 할 수 있습니다。

실例

예제 1

사용할 이미지:

튜립

화면에 이미지를 그립니다:

您的浏览器不支持HTML5 canvas标签。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);

직접 시험해 보세요

추천:페이지 하단에 더 많은 예제가 제공됩니다。

문법

JavaScript 문법 1

화면에 이미지를 정위치합니다:

context.drawImage(img,x,y);

JavaScript 문법 2

화면에 이미지를 정위치하고 이미지의 너비와 높이를 지정합니다:

context.drawImage(img,x,y,width,height);

JavaScript 문법 3

이미지를 잘라내고 화면에 잘라낸 부분을 정위치합니다:

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

파라미터 값

파라미터 설명
img 사용할 이미지, 화면 또는 비디오를 지정합니다。
sx 선택 사항。시작에서 잘라내기 시작할 x 좌표 위치。
sy 선택 사항。시작에서 잘라내기 시작할 y 좌표 위치。
swidth 선택 사항。잘라낸 이미지의 너비。
sheight 선택 사항。잘라낸 이미지의 높이。
x 화면에 이미지를 배치할 x 좌표 위치。
y 화면에 이미지를 배치할 y 좌표 위치。
width 선택 사항。사용할 이미지의 너비。(이미지를 확장하거나 축소합니다)
height 선택 사항。사용할 이미지의 높이。(이미지를 확장하거나 축소합니다)

更多实例

예제 2

화면에 이미지를 정위치하고 이미지의 너비와 높이를 지정합니다:

您的浏览器不支持HTML5 canvas标签。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);

직접 시험해 보세요

예제 3

이미지를 잘라내고 화면에 잘라낸 부분을 정위치합니다:

您的浏览器不支持HTML5 canvas标签。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,90,80,20,20,90,80);

직접 시험해 보세요

예제 4

사용할 비디오(시연을 시작하려면 재생 버튼을 누르십시오):

화면:

您的浏览器不支持HTML5 canvas标签。

JavaScript (매 20 밀리초마다 코드가 비디오의 현재 프레임을 그립니다):

var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function()} 
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);

직접 시험해 보세요

브라우저 지원

표의 숫자는 해당 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

주의사항:Internet Explorer 8 이상의 버전은 <canvas> 요소를 지원하지 않습니다.