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

不言
풀어 주다: 2019-03-14 11:28:17
앞으로
5845명이 탐색했습니다.

이 글은 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의 캔버스 태그에 이미지를 그리고 처리하는 기본 작업입니다.







                                                                                        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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿