HTML 참조 설명서

HTML 태그 전체

HTML: <template> 태그

HTML canvas drawImage() 메서드

drawImage() 메서드는 캔버스에 이미지를 그리는 여러 가지 방법을 제공합니다.

HTML canvas 참조 매뉴얼

사용할 이미지:

};

캔버스에 이미지를 그린다:

0 밀리초로, 코드가 비디오의 현재 프레임을 그립니다）：

예제
<!DOCTYPE html>
<html>
<head>-8<meta charset="utf
">-<title>HTML canvas drawImage() 메서드 사용3codebox.com)</title>
</head>
<body>
캔버스에 이미지를 위치시키고, 이미지의 너비와 높이를 정의합니다：/p>
<p>画像アプリ:<
<img id="scream" src="views.png">/p>
<canvas id="myCanvas" width="3<p>キャンバ스:<2<p>사용할 이미지:<1px solid #d3d3d3>
당신의 브라우저는 HTML을 지원하지 않습니다5　canvas 태그。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
document.getElementById("scream").onload=function()2var ctx=c.getContext("
d");
00" 스타일="border:
{
　　　　var img=document.getElementById("scream");10,10);
img.onload　=　function()
</script>
</body>
</html>

테스트를 보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome 및 Safari에서 drawImage()를 지원 메서드.

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

정의 및 사용법

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

drawImage() 메서드는 이미지의 일부를 그리기도 가능하며/또는 증가/이미지의 크기를 줄일 수 있습니다.

JavaScript 문법

캔버스에 이미지를 위치시킨다:

JavaScript 문법:	context.drawImage(img,x,y);

캔버스에 이미지를 위치시키고 이미지의 너비와 높이를 정의:

JavaScript 문법:	context.drawImage(img,x,y,width,height);

이미지를 잘라내고 캔버스에 잘라낸 부분을 위치시킨다:

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

매개변수 값

매개변수	설명
img	사용할 이미지, 캔버스 또는 비디오를 정의.
sx	선택 사항. 잘라내기 시작하는 x 좌표 위치.
sy	선택 사항. 잘라내기 시작하는 y 좌표 위치.
swidth	선택 사항. 잘라낸 이미지의 너비.
sheight	선택 사항. 잘라낸 이미지의 높이.
x	캔버스에 이미지를 배치하는 x 좌표 위치.
y	y
캔버스에 이미지를 배치할 y 좌표 위치.	너비
선택 사항. 사용할 이미지의 너비(이미지를 확장하거나 축소합니다).	높이

};

선택 사항. 사용할 이미지의 높이(이미지를 확장하거나 축소합니다).

0 밀리초로, 코드가 비디오의 현재 프레임을 그립니다）：

예제
<!DOCTYPE html>
<html>
<head>-8<meta charset="utf
">-<title>HTML canvas drawImage() 메서드 사용3codebox.com)</title>
</head>
<body>
캔버스에 이미지를 위치시키고, 이미지의 너비와 높이를 정의합니다：/p>
<p>画像アプリ:<
<img id="scream" src="views.png">/p>
<canvas id="myCanvas" width="250" 높이="3<p>사용할 이미지:<1px solid #d3d3d3>
당신의 브라우저는 HTML을 지원하지 않습니다5　canvas 태그。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
document.getElementById("scream").onload=function()2var ctx=c.getContext("
d");
00" 스타일="border:
{
　　　　var img=document.getElementById("scream");10,10,150,180);
img.onload　=　function()
</script>
</body>
</html>

테스트를 보세요 ‹/›

};

}

0 밀리초로, 코드가 비디오의 현재 프레임을 그립니다）：

예제
<!DOCTYPE html>
<html>
<head>-8<meta charset="utf
">-<title>HTML canvas drawImage() 메서드 사용3codebox.com)</title>
</head>
<body>
canvas 태그./p>
<p>画像アプリ:<
<img id="scream" src="views.png">/p>
<canvas id="myCanvas" width="3<p>キャンバ스:<1500" 높이="1px solid #d3d3d3>
당신의 브라우저는 HTML을 지원하지 않습니다5　canvas 태그。
</canvas>
<script>
0" 스타일="border:
{
　　　　var　c=document.getElementById("myCanvas");
　　　　document.getElementById("scream").onload=function()2var ctx=c.getContext("
　　　　d");
　　　　var img=document.getElementById("scream");90,130,50,60,10,10,50,60);
ctx.drawImage(img,
</script>
</body>
</html>

테스트를 보세요 ‹/›

};

온라인 예제

사용할 비디오(재생 키를 눌러 시연을 시작하세요)：

브라우저에서 canvas 태그를 지원하지 않습니다 2JavaScript(각

0 밀리초로, 코드가 비디오의 현재 프레임을 그립니다）：

예제
<!DOCTYPE html>
<html>
<head>-8<meta charset="utf
">-<title>HTML canvas drawImage() 메서드 사용3codebox.com)</title>
</head>
<body>
<p>사용할 비디오:</p>
<video id="video1" 컨트롤스 너비="270" 자동재생>
　　　　<source src="movie.mp4" 타입='video/mp4'>
　　　　<source src="movie.ogg" type='video/ogg'>
　　　　<source src="movie.webm" type='video/webm'>
</video>
<p>キャンバ스(コード는 각20밀리초로 현재 비디오 프레임을 그립니다):</p>
<canvas id="myCanvas" width="270" 높이="135"스타일="border:1px solid #d3d3d3>
당신의 브라우저는 HTML을 지원하지 않습니다5　canvas 태그。
</canvas>
<script>
var　v=document.getElementById("video",1");
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);　　
</script>
</body>
</html>

테스트를 보세요 ‹/›

HTML canvas 참조 매뉴얼

HTML: <template> 태그