HTML5에서 캔버스에 그림을 삽입하는 방법의 예에 대한 자세한 설명

캔버스 로딩...

캔버스에 이미지를 표시하는 것은 매우 간단합니다. 이미지에 스탬프를 추가하거나 이미지를 늘리거나 보정 레이어를 통해 이미지를 수정할 수 있으며 일반적으로 이미지가 캔버스에 초점이 됩니다. HTML5 Canvas API에 내장된 몇 가지 간단한 명령을 사용하여 캔버스에 이미지 콘텐츠를 쉽게 추가할 수 있습니다.

그러나 이미지는 캔버스 작업의 복잡성을 증가시킵니다. 이미지를 작동하려면 이미지가 완전히 로드될 때까지 기다려야 합니다. 브라우저는 일반적으로 페이지 스크립트가 실행되는 동안 이미지를 비동기적으로 로드합니다. 이미지가 완전히 로드되기 전에 캔버스에 이미지를 렌더링하려고 하면 캔버스에 이미지가 표시되지 않습니다. 따라서 개발자는 렌더링하기 전에 이미지가 로드되었는지 확인하기 위해 특별한 주의를 기울여야 합니다.

렌더링하기 전에 이미지가 완전히 로드되었는지 확인하기 위해 콜백을 제공합니다. 즉, 아래 코드 목록에 표시된 것처럼 이미지가 로드될 때만 후속 코드가 실행됩니다.

<script type="text/javascript">
function drawBeauty(beauty){
var mycv = document.getElementById("cv");  
var myctx = mycv.getContext("2d");
myctx.drawImage(beauty, 0, 0);
}
function load(){
var beauty = new Image();  
beauty.src = "http://images.cnblogs.com/cnblogs_com/html5test/359114/r_test.jpg"; 
if(beauty.complete){
   drawBeauty(beauty);
}else{
   beauty.onload = function(){
     drawBeauty(beauty);
   };
   beauty.onerror = function(){
     window.alert(&#39;美女加载失败，请重试&#39;);
   };
};   
}//load
if (document.all) {
  window.attachEvent(&#39;onload&#39;, load);  
  }else {  
  window.addEventListener(&#39;load&#39;, load, false);
  }
</script>

기본 그리기

가장 기본적인 그리기 작업에서 필요한 것은 이미지를 표시할 위치(x 및 y 좌표)뿐입니다. 이미지의 위치는 왼쪽 위 모서리를 기준으로 판단됩니다. 이 방법을 사용하면 이미지를 원래 크기로 캔버스에 간단히 그릴 수 있습니다.

drawImage(image, x, y)
var canvas = document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(’2d’);
ctx.drawImage(myImage, 50, 50);
ctx.drawImage(myImage, 125, 125);
ctx.drawImage(myImage, 210, 210);

스케일 및 크기 조정

이미지 크기를 변경하려면 오버로드된 drawImage 함수를 사용하고 원하는 너비 및 높이 매개변수를 제공해야 합니다.

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

var canvas = document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(’2d’);ctx.drawImage(myImage, 50, 50, 100, 100);
ctx.drawImage(myImage, 125, 125, 200, 50);
ctx.drawImage(myImage, 210, 210, 500, 500);

이미지 자르기

마지막 drawImage 메서드는 이미지를 자르는 데 사용됩니다.

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

파라미터는 많지만 기본적으로는 원본 이미지에서 직사각형 영역을 취해 캔버스의 대상 영역에 그리는 것이라고 생각하시면 됩니다.

위 내용은 HTML5에서 캔버스에 그림을 삽입하는 방법의 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!