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 자동 }
"canvas-warp"
11. > <캔버스 id="캔버스"
>
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)

                                                       

};

실행 결과:

사진 액자 만들기:
여기에서는 위의 경우에 clips(), drawImage() 및 3차 베지어 곡선 bezierCurveTo()를 결합하여 하트 모양의 액자를 추가합니다~

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

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

  

  

<스크립트>   

    window.onload = 함수(){   

        var canvas = document.getElementById("canvas");   

        canvas.width = 800;   

        canvas.height = 600;   

        var context = canvas.getContext("2d");   

        context.fillStyle = "#FFF";   

        context.fillRect(0,0,800,600);   

  

        context.beginPath();   

        context.moveTo(400,260);   

        context.bezierCurveTo(450,220,450,300,400,315);   

        context.bezierCurveTo(350,300,350,220,400,260);   

        context.clip();   

        context.closePath();   

  

        var img = new Image();   

        img.src = "./images/20-1.jpg";   

        img.onload = 함수(){   

            context.drawImage(img,348,240,100,100);   

        }   

    };