drawImage 함수를 사용하여 이미지를 그리는 방법은 무엇입니까?

drawImage 함수에는 그림을 그리는 방법이 원본 그림의 크기에 따라 그리는 방법, 지정된 크기에 따라 그리는 세 가지 방법이 있으며 일반적으로 그림을 자르는 방법을 사용할 수 있습니다

오늘은 drawImage의 사용법을 소개하겠습니다. 참고로 모든 분들에게 도움이 되었으면 좋겠습니다

[추천 과정: HTML5 tutorial]

drawImage 함수는 캔버스 태그에 있는 메소드로, 새로운 요소입니다 HTML5에서는 주로 그림 그리기, 이미지 합성, 간단한 애니메이션 만들기 등에 사용됩니다.

drawImage() 메서드는 그림 그리기 효과를 얻기 위한 세 가지 형식이 있습니다.

방법 1:

첫 번째 방법 전체 이미지를 캔버스에 복사하여 지정된 지점의 왼쪽 상단에 배치하고 각 이미지 픽셀을 캔버스 좌표계 단위로 매핑하는 것입니다. 원본 이미지의 크기에 따라 그려집니다

drawImage(image, x, y)

예: 왼쪽 위 모서리의 위치를 ​​기준으로 캔버스에 이미지를 그립니다

<script>
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="images/22.jpg";
 img.onload=function(){
cxt.drawImage(img,150,150);
cxt.drawImage(img,250,250);
}
</script>

렌더링:

방법 2:

두 번째 이 방법도 이미지 전체를 캔버스에 복사하지만, 이미지의 원하는 너비와 높이를 캔버스 단위로 지정할 수 있습니다.

drawImage(image, x, y, width, height)

예: 이미지의 크기 설정

<script>
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="images/22.jpg";
 img.onload=function(){
cxt.drawImage(img,150,150,100,100);
cxt.drawImage(img,250,250,100,100);
}
</script>

렌더링:

방법 3:

세 번째 방법은 완전히 보편적이며, 이미지의 직사각형 영역을 지정할 수 있습니다. 이미지를 복사하고 캔버스의 어느 위치에서든 확대/축소할 수 있습니다

drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)

예: 그림 자르기

<script>
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="images/22.jpg";
 img.onload=function(){
cxt.drawImage(img,20,30,50,50,25,25,100,100);
cxt.drawImage(img,115,115,100,100,125,125,200,200);
}
</script>

렌더링:

요약: 위는 drawImage 함수의 사용법입니다. 이것이 사용될 수 있기를 바랍니다. 이 기사는 drawImage 함수를 사용하는 방법을 배우는 데 도움이 될 수 있습니다.

위 내용은 drawImage 함수를 사용하여 이미지를 그리는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!