HTML canvas drawImage() Method

이미지 사용 :

예

캔버스에 이미지를 그립니다 :

자바 스크립트 :

window.onload = function() {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    ctx.drawImage(img,10,10);
};

»그것을 자신을 시도

브라우저 지원

표의 수치는 완전히 방법을 지원하는 제 브라우저 버전을 지정.

방법
drawImage()	예	9.0	예	예	예

정의 및 사용

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

drawImage() 메소드는 이미지의 부분을 그리고 / 또는 증가 / 영상 크기를 줄일 수있다.

	참고 : 호출 할 수 없습니다 drawImage() 이미지를로드하기 전에 방법을. 이미지가로드되었는지 확인하려면 호출 할 수 있습니다 drawImage() from window.onload() 또는에서 document.getElementById(" imageID ").onload .

자바 스크립트 구문

캔버스에 이미지를 배치합니다 :

자바 스크립트 구문 :	context.drawImage(img,x,y);

캔버스에 이미지를 배치하고, 이미지의 폭과 높이를 지정합니다

자바 스크립트 구문 :	context.drawImage(img,x,y,width,height);

이미지를 클립하고 캔버스에 잘린 부분의 위치 :

자바 스크립트 구문 :	context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

매개 변수 값

매개 변수	기술	플레이
img	사용하는 화상, 캔버스, 또는 화상 요소를 지정
sx	선택 과목. 클리핑 시작 위치를 X 좌표	»플레이
sy	선택 과목. 클리핑 시작하는 곳 y 좌표	»플레이
swidth	선택 과목. 클리핑 된 이미지의 폭	»플레이
sheight	선택 과목. 클리핑 된 이미지의 높이	»플레이
x	캔버스에 이미지를 배치 할 위치를 X 좌표	»플레이
y	캔버스에 이미지를 배치 할 위치를 y 좌표	»플레이
width	선택 과목. 이미지의 폭은 사용 (스트레칭이나 이미지를 축소)하기	»플레이
height	선택 과목. 이미지의 높이를 사용 (스트레칭이나 이미지를 축소)하기	»플레이

더 예

예

캔버스에 이미지를 배치하고, 이미지의 폭과 높이를 지정합니다

자바 스크립트 :

window.onload = function() {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    ctx.drawImage(img,10,10,150,180);
};

»그것을 자신을 시도

예

이미지를 클립하고 캔버스에 잘린 부분의 위치 :

자바 스크립트 :

window.onload = function() {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    ctx.drawImage(img,90,130,50,60,10,10,50,60);
};

»그것을 자신을 시도