HTML 캔버스의 drawImage () 메소드

사진을 사용하려면 :

예

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

자바 스크립트 :

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

»시도

브라우저 지원

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

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

정의 및 사용

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

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

자바 스크립트 구문

캔버스에 이미지 위치 :

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

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

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

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

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

매개 변수 값

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度（伸展或缩小图像）。
height	可选。要使用的图像的高度（伸展或缩小图像）。

더 많은 예제

예

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

자바 스크립트 :

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);

»시도