집 > 기사 > 웹 프론트엔드 > HTML5 Canvas 그리기의 drawImage() 메서드에 대한 자세한 소개(코드 예)

HTML5 Canvas 그리기의 drawImage() 메서드에 대한 자세한 소개(코드 예)

不言앞으로: 2019-03-14 11:28:175773검색

이 글은 HTML5 Canvas 그리기의 drawImage() 메소드에 대한 자세한 소개(코드 예제)를 제공합니다. 이는 특정 참고 가치가 있으므로 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

은 스크립트 언어(일반적으로 JavaScript)에서 그래픽을 그리는 데 사용할 수 있는 새로운 HTML 요소입니다. 예를 들어, 그림을 그리거나 이미지를 합성하거나 간단한(그리 단순하지는 않은) 애니메이션을 만드는 데 사용할 수 있습니다.

1. 캔버스에 그리는 가장 일반적인 방법은 이미지 개체를 사용하는 것입니다. 지원되는 소스 이미지 형식은 브라우저 지원에 따라 다릅니다. 그러나 일부 일반적인 이미지 형식(png, jpg, gif 등)은 기본적으로 문제가 없습니다.
2. 아래의 모든 예에서 이미지 소스는 이 200×200 크기 이미지를 사용합니다.

HTML5 Canvas 그리기의 drawImage() 메서드에 대한 자세한 소개(코드 예)

3. 그림 그리기: 가장 기본적인 그리기 작업에서 필요한 것은 이미지를 표시할 위치(x 및 y 좌표)뿐입니다. 이미지의 위치는 왼쪽 위 모서리를 기준으로 판단됩니다. 이 방법을 사용하면 이미지를 원래 크기로 캔버스에 간단하게 그릴 수 있습니다.
4. 코드는 다음과 같습니다.

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50);

5. 이미지 변형: 이미지 크기를 변경하려면 오버로드된 drawImage 함수를 사용하고 원하는 너비 및 높이 매개변수를 제공해야 합니다.
6. 코드는 다음과 같습니다.

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50,100,100);

7. 이미지 자르기: drawImage 메서드의 기능은 이미지를 자르는 것입니다. drawImage(이미지, 소스를 대상 영역에 넣습니다.
9. 코드는 다음과 같습니다.
var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,0,0,50,50,25,25,100,100);

cxt.drawImage(img,125,125,100,100,125,125,150,150);

10 HTML5의 캔버스 태그에 이미지를 그리고 처리하는 기본 작업입니다.

붉은 단풍잎 ~ ~ HTML5 Canvas 그리기의 drawImage() 메서드에 대한 자세한 소개(코드 예) 저자 팔로우注 왜냐하면 HTML5 Canvas 그리기 drawImage() 메서드에 대한 자세한 설명javascript

16번 읽음 읽는 데 5분 정도 걸립니다

~ -

Introduction은 스크립트 언어(보통 JavaScript)에서 그래픽을 그리는 데 사용할 수 있는 새로운 HTML 요소입니다. 예를 들어, 그림을 그리거나 이미지를 합성하거나 간단한(그리 단순하지는 않은) 애니메이션을 만드는 데 사용할 수 있습니다. 1. 캔버스에 그리는 가장 일반적인 방법은 이미지 개체를 사용하는 것입니다. 지원되는 소스 이미지 형식은 브라우저 지원에 따라 다릅니다. 그러나 일부 일반적인 이미지 형식(png, jpg, gif 등)은 기본적으로 문제가 없습니다. 2. 아래의 모든 예에서 이미지 소스는 이 200×200 크기 이미지를 사용합니다.

3. 그림 그리기: 가장 기본적인 그리기 작업에서 필요한 것은 이미지를 표시할 위치(x 및 y 좌표)뿐입니다. 이미지의 위치는 왼쪽 위 모서리를 기준으로 판단됩니다. 이 방법을 사용하면

이미지를 원래 크기로 캔버스에 간단하게 그릴 수 있습니다
.

4. 코드는 다음과 같습니다.

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50);

5. 이미지 변형: 이미지 크기를 변경하려면 오버로드된 drawImage 함수를 사용하고 원하는 너비 및 높이 매개변수를 제공해야 합니다. 6. 코드는 다음과 같습니다.

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50,100,100);

7. 이미지 자르기: drawImage 메서드의 기능은 이미지를 자르는 것입니다. drawImage(이미지, 소스를 대상 영역에 넣습니다.

9. 코드는 다음과 같습니다.
var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,0,0,50,50,25,25,100,100);

cxt.drawImage(img,125,125,100,100,125,125,150,150);

10 HTML5의 캔버스 태그에 이미지를 그리고 처리하는 기본 작업입니다. | HTML5 Canvas 그리기의 drawImage() 메서드에 대한 자세한 소개(코드 예)

댓글
~

댓글 더 보기

위 내용은 HTML5 Canvas 그리기의 drawImage() 메서드에 대한 자세한 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript html5 html var 对象 canvas

성명：

이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：캔버스에 시계를 그리는 코드 예다음 기사：캔버스에 시계를 그리는 코드 예