HTML5 캔버스에 대한 자세한 설명(5)

drawImage는 총 3가지 메소드를 제공합니다.

1. 이미지를 캔버스에 배치합니다.

context.drawImage(img,x,y);

2. 캔버스에 이미지를 배치하고 이미지의 너비와 높이를 지정합니다.

rree

3. 이미지를 자르고 자른 부분을 캔버스에 배치합니다.

context.drawImage(img,x,y,width,height);

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

다음 코드에는 캔버스에 이미지를 그리는 위의 세 가지 방법이 포함되어 있습니다.

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

효과는 다음과 같습니다. 🎜 >
첫 번째 그림: context.drawImage(img, 0, 0) 캔버스(0,0)에서 그리기를 시작하고 이미지의 원래 크기를 그립니다.
두 번째 그림: context.drawImage(img, 0, 0, 500, 300)은 캔버스(0,0)에서 그리기 시작하고 그려진 이미지의 너비와 높이를 500과 300으로 지정한다는 의미입니다. 그러면 원본 이미지가 늘어나거나 줄어듭니다.
세 번째 그림: context.drawImage(img, 200,100, 200, 200, 0, 0, 200, 200)은 (200,100) 위치에서 너비와 높이가 각각 200과 200인 부분을 자르는 것을 의미합니다. 그리고 캔버스의 (0,0) 위치에 배치하고, 그려지는 이미지의 너비와 높이를 각각 200과 200으로 지정합니다.

위 내용은 HTML5 캔버스에 대한 자세한 설명(5)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!