HTML 캔버스 drawImage() 메서드
정의와 사용법
drawImage() 메쉬에서 이미지, 메쉬 또는 비디오를 그립니다.
drawImage() 메서드는 이미지의 일부를 그리거나, 또는 이미지의 크기를 증가하거나 감소시키기도 할 수 있습니다。
실例
예제 1
사용할 이미지：
화면에 이미지를 그립니다：
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
화면에 이미지를 정위치하고 이미지의 너비와 높이를 지정합니다：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);
예제 3
이미지를 잘라내고 화면에 잘라낸 부분을 정위치합니다：
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
사용할 비디오（시연을 시작하려면 재생 버튼을 누르십시오）：
화면：
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> 요소를 지원하지 않습니다.
