이미지 사용 :
예
캔버스에 이미지를 그립니다
자바 스크립트 :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10); »그것을 자신을 시도 브라우저 지원
테이블의 숫자는 완전히 방법을 지원하는 최초의 브라우저 버전을 지정합니다.
| 방법 | |||||
|---|---|---|---|---|---|
| drawImage() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
정의 및 사용
drawImage() 메소드는 캔버스에 이미지, 캔버스, 또는 동영상을 그린다.
drawImage() 메소드는 이미지의 부분을 그리고 / 또는 증가 / 이미지 사이즈를 감소시킬 수있다.
자바 스크립트 구문
캔버스에 이미지를 배치합니다 :
| 자바 스크립트 구문 : | 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 | 선택 과목. 화상의 폭은 사용하는 (stretch or reduce the image) | »플레이 |
| height | 선택 과목. 이미지의 높이를 사용하기 (stretch or reduce the image) | »플레이 |
더 예
예
캔버스에 이미지를 배치하고, 이미지의 폭과 높이를 지정합니다
자바 스크립트 :
var c=document.getElementById("myCanvas");
var
ctx=c.getContext("2d");
var
img=document.getElementById("scream");
ctx.drawImage(img,10,10,150,180); »그것을 자신을 시도 예
이미지를 클립 캔버스에 잘린 부분의 위치를 :
자바 스크립트 :
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); »그것을 자신을 시도 예
비디오 사용하기 (press Play to start the demonstration) :
캔버스:
자바 스크립트 (코드는 비디오 매 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,5,5,260,125)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false); »그것을 자신을 시도 <캔버스 개체