Latest web development tutorials

HTML 캔버스의 drawImage () 메소드

HTML 캔버스 참조 설명서 HTML 캔버스 참조 설명서

사진을 사용하려면 :

절규

예

캔버스 위에 그림을 그리려면

브라우저가 HTML5 캔버스 태그를 지원하지 않습니다.

자바 스크립트 :

var에 C = document.getElementById를 ( "myCanvas");
var에 CTX = c.getContext ( "2 차원");
var에 IMG = document.getElementById를 ( "비명");
img.onload = 함수 () {
ctx.drawImage (IMG, 10, 10);
}

»시도

브라우저 지원

Internet ExplorerFirefoxOperaGoogle ChromeSafari

인터넷 익스플로러 9, 파이어 폭스, 오페라, 크롬과 사파리 지원의 drawImage () 메소드.

참고 : 인터넷 익스플로러 8 이전 버전의 <캔버스> 요소를 지원하지 않습니다.

정의 및 사용

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

특정 부분의 drawImage () 메소드는 또한 이미지를 그릴 및 / 또는 이미지의 크기를 증가 또는 감소시킬 수있다.

자바 스크립트 구문

캔버스에 이미지 위치 :

자바 스크립트 구문 : 문맥 .drawImage (IMG, X, Y);

캔버스, 이미지의 소정의 폭과 높이에 이미지 위치 :

자바 스크립트 구문 : 문맥 .drawImage (IMG, X, Y, 폭, 높이);

이미지를 잘라 캔버스에 절단 부분을 지역화 :

자바 스크립트 구문 : 문맥 .drawImage (IMG, SX, SY, swidth, sheight, x, y, 폭, 높이);

매개 변수 값

매개 변수 기술
IMG 사용하려는 이미지, 캔버스 또는 비디오를 미리 결정.
SX 선택 사항. 는 x의 위치 좌표를 절단 시작합니다.
싸이 선택 사항. 잘라 y 좌표를 시작합니다.
swidth 선택 사항. 그것은 커트 이미지의 폭이다.
sheight 선택 사항. 높은 이미지를 잘라.
엑스 장소는 X 캔버스에 이미지의 위치를 ​​좌표입니다.
Y 캔버스에 이미지의 위치의 y 좌표를 놓습니다.
폭 선택 사항. (연신 또는 화상 축소에 의해) 이미지의 폭을 사용한다.
신장 선택 사항. 이미지의 높이 당신은 (스트레칭이나 이미지를 축소하여) 사용하려고합니다.

예

더 많은 예제

예

캔버스 화상 위치에서 다음 이미지의 폭과 높이를 지정

브라우저가 HTML5 캔버스 태그를 지원하지 않습니다.

자바 스크립트 :

var에 C = document.getElementById를 ( "myCanvas");
var에 CTX = c.getContext ( "2 차원");
var에 IMG = document.getElementById를 ( "비명");
img.onload = 함수 () {
ctx.drawImage (IMG, 10,10,150,180);
}

»시도

예

사진을 잘라하고, 전단 부분의 캔버스에 위치한다 :

브라우저가 HTML5 캔버스 태그를 지원하지 않습니다.

자바 스크립트 :

var에 C = document.getElementById를 ( "myCanvas");
var에 CTX = c.getContext ( "2 차원");
var에 IMG = document.getElementById를 ( "비명");
ctx.drawImage (IMG, 90,130,50,60,10,10,50,60);

»시도

예

비디오 당신은 (데모를 시작하려면 재생 버튼을 눌러)를 사용하려면 :

캔버스 :

캔버스 태그를 지원하지 않는 브라우저

자바 스크립트 (매 20 밀리 초, 코드는 비디오의 현재 프레임을 그릴 것입니다)

var에 V = document.getElementById를 ( "비디오 1");
var에 C = document.getElementById를 ( "myCanvas");
CTX c.getContext = ( '2D');
v.addEventListener ( '재생'기능 () {var에 나는 = window.setInternal을 (함수 () {ctx.drawImage (V, 5,5,260,125)}, 20);}, false)를;
v.addEventListener ( '일시 정지'기능 () {window.clearInterval (I);}, false)를;
v.addEventListener는 ( '종료', 함수 () {위해 clearInterval (I);}, false)를;

»시도

HTML 캔버스 참조 설명서 HTML 캔버스 참조 설명서