HTML5 Canvas API_html5 튜토리얼 기술의 drawImage() 메소드 사용 예

drawImage()는 이미지, 캔버스 및 비디오를 도입하고 크기를 조정하거나 자를 수 있는 핵심 메서드입니다.

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

문법1

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

1. context.drawImage(img,dx,dy)

문법2

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

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

문법3

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

1. 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 코드클립보드에 콘텐츠 복사

2. "zh">
"UTF-8">
5. 본문 { 배경: url(
"./images/bg3.jpg"
6. ) 반복 } #canvas { 테두리: 1px 솔리드 #aaaaaa; 디스플레이: 블록; 여백: 50px 자동 }
10. "canvas-warp"
11. > "캔버스"
>
12. 브라우저가 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)

                                                       

};