HTML5 Canvas API에서 drawImage() 메소드를 사용하기 위한 코드 예제 공유(그림)

이 글에서는 HTML5 Canvas API에서 drawImage() 메소드의 사용 예를 주로 소개합니다. drawImage() 메소드는 주로 이미지 크기를 조정하는 데 사용됩니다. 또는 자르기, 기사에서 좌표 및 관련 매개 변수의 사용법을 제공하며 필요한 친구가 참조할 수 있습니다.

drawImage()는 매우 중요한 방법으로 이미지, 캔버스, 동영상 크기를 조정하거나 잘라냅니다.

에는 세 가지 표현 형식이 있습니다.

문법 1

context.drawImage(img,dx,dy);

• 
  

문법 2

안녕

1. 문법 3

JavaScript 코드클립보드에 콘텐츠 복사

context.drawImage(img,dx,dy,dw,dw);

좌표 스케치 보기:

PS: Do 스타일에서 <캔버스>의 너비와 높이를 정의하지 마세요. 그렇지 않으면 안에 그려진

그림이 자동으로 확대되거나 축소됩니다. 3개 매개변수 버전은 표준 형식이며 이미지, 캔버스 또는 비디오를 로드하는 데 사용할 수 있습니다. 5개 매개변수 버전은 이미지를 로드할 수 있을 뿐만 아니라 9개의 매개변수로 이미지 크기를 조정할 수도 있습니다. 크기 조정 외에도 버전을 자를 수도 있습니다. 각 매개변수의 의미는 아래 표를 참조하세요.

매개변수

설명

img

sx

선택사항. 자르기를 시작할 X 좌표 위치입니다.

sy

선택사항. 절단을 시작할 Y좌표 위치입니다.

너비

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

선택사항. 자른 이미지의 너비입니다.

키

선택사항. 잘린 이미지의 높이입니다.

x

이미지의 x 좌표 위치를 캔버스에 배치합니다.

y

이미지의 y 좌표 위치를 캔버스에 배치합니다.

너비

선택사항. 사용할 이미지의 너비입니다. (이미지를 늘리거나 줄입니다)

height

사용할 이미지의 높이입니다. (이미지를 늘리거나 줄입니다)

다음으로 이미지를 불러와 보겠습니다.

아아아앙

• 
  

실행 결과:

사진 프레임 만들기: 여기서 clip

()을 drawImage() 및 3차 베지어 곡선 bezierCurveTo()와 결합하여 위의 경우 사진 프레임에 하트 모양을 추가합니다. ~

context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);

실행 결과:

멋지지 않나요? 자, 이제 가장 중요한 마스킹과 이미지 자르기에 대한 이야기를 마쳤습니다. 사실 drawImage()도 java.awt의 중요한 메소드입니다. 어떤 사람들은 자바 게임 인터페이스를 만들 때 drawImage() 사용법만 알면 한 번의 움직임으로 세계를 정복할 수 있다고 합니다~ Canvas에서도 마찬가지입니다. 아티스트가 제공하는 자료는 기본적으로 그림입니다. 이때 drawImage()는 그림을 처리하는 데 매우 중요합니다. 기본적인 기술조차도 사진을 처리하는 가장 중요한 방법입니다.

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