Canvas 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> 요소를 지원하지 않습니다.
