drawImage()는 이미지, 캔버스 및 비디오를 도입하고 크기를 조정하거나 자를 수 있는 핵심 메서드입니다.
표현에는 세 가지 형태가 있습니다.
문법1
JavaScript 코드클립보드에 콘텐츠 복사
-
context.drawImage(img,dx,dy)
문법2
JavaScript 코드클립보드에 콘텐츠 복사
-
context.drawImage(img,dx,dy,dw,dw)
문법3
JavaScript 코드클립보드에 콘텐츠 복사
-
context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)
좌표 스케치를 살펴보겠습니다:
PS: 스타일에서 <캔버스>의 너비와 높이를 정의하지 마세요. 그렇지 않으면 내부에 그려진 그림이 자동으로 확대되거나 축소됩니다.
3개 매개변수 버전은 표준 형식이며 이미지, 캔버스 또는 비디오를 로드하는 데 사용할 수 있습니다. 5개 매개변수 버전은 이미지를 로드할 수 있을 뿐만 아니라 9개의 매개변수로 이미지 크기를 조정할 수도 있습니다. 크기 조정 외에도 버전을 자를 수도 있습니다. 각 매개변수의 의미는 아래 표를 참조하세요.
| 参数 |
描述 |
| img |
| sx |
可选。开始剪切的 x 坐标位置。 |
| sy |
可选。开始剪切的 y 坐标位置。 |
| swidth |
可选。被剪切图像的宽度。 |
| sheight |
可选。被剪切图像的高度。 |
| x |
在画布上放置图像的 x 坐标位置。 |
| y |
在画布上放置图像的 y 坐标位置。 |
| width |
可选。要使用的图像的宽度。（伸展或缩小图像） |
| height |
要使用的图像的高度。（伸展或缩小图像） |
다음으로 이미지를 불러와 보겠습니다.
JavaScript 코드클립보드에 콘텐츠 복사
-
- "zh">
-
"UTF-8">
drawImage()
-
- 본문 { 배경: url(
"./images/bg3.jpg"-
) 반복 }
#canvas { 테두리: 1px 솔리드 #aaaaaa; 디스플레이: 블록; 여백: 50px 자동 }
-
-
-
-
"canvas-warp"
- >
<캔버스 id="캔버스"
>
-
브라우저가 Canvas를 지원하지 않나요? ! 빨리 바꿔라! !
-
-
-
<스크립트>
- window.onload =
함수-
(){
-
var canvas = document.getElementById(
"canvas"-
);
canvas.width = 800
캔버스.높이 = 600
- var
context = canvas.getContext(- "2d"
);
-
context.fillStyle = "#FFF"
context.fillRect(0,0,800,600)
-
var- img =
new-
이미지()
-
img.src = "./images/20-1.jpg";
img.onload = 함수
(){ -
context.drawImage(img,200,50)
-
};
-
-
