HTML5 캔버스에 이미지를 그리는 방법-H5 튜토리얼-php.cn

HTML5 캔버스에 이미지를 그리는 방법

不言

풀어 주다： 2018-12-01 17:30:15

원래의

4692명이 탐색했습니다.

캔버스는 HTML5의 새로운 캔버스인데, HTML5 캔버스는 어떻게 이미지를 그리는 걸까요? 이번 글에서는 HTML5 캔버스에 이미지를 그리는 방법을 소개하겠습니다. 구체적인 내용을 살펴보겠습니다.

HTML5 canvas

코드 예제를 직접 살펴보겠습니다

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
    function draw() {
      var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
      if (!canvas || !canvas.getContext) {
        return false;
      }
      var context = canvas.getContext(&#39;2d&#39;);
      var img = new Image();
      img.onload = function onImageLoad() {
        context.drawImage(img, 128, 40);
      }
      img.src = &#39;img/flower.jpg&#39;;
    }
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

로그인 후 복사

설명: 캔버스에 그림을 그릴 때 캔버스의 컨텍스트를 얻는 것은 일반적인 과정입니다.

캔버스에 그릴 이미지를 준비합니다. 이미지 개체를 만듭니다.

  var img = new Image();

로그인 후 복사

캔버스에 이미지를 그리는 것은 Canvas 컨텍스트의 drawImage() 메서드를 사용합니다. Image 개체를 그리기 위해 X 및 Y 좌표가 첫 번째 매개 변수로 제공되고 두 번째 세 번째 매개 변수로 이미지가 제공됩니다. Image 개체의 이미지 로드는 비동기적으로 처리되므로 Image 개체의 이미지가 준비되기 전에 준비되어야 합니다. . 따라서 Image 객체의 onload 이벤트에 대해 그리기 처리를 구현하고 최종적으로 소스 이미지의 설정을 처리합니다

img.onload = function onImageLoad() {
    context.drawImage(img, 128, 40);
  }
  img.src = &#39;img/flower.jpg&#39;;

로그인 후 복사

실행 결과

HTML 파일을 웹 브라우저에서 엽니다. 결과는 아래와 같습니다. 캔버스에 이미지가 그려집니다.

HTML5 canvas

참고: 다음 코드의 경우 drawImage가 실행될 때 Image 개체의 이미지를 읽는다는 보장이 없습니다. 따라서 이미지를 표시하는 동안 이런 일이 발생할 수 있습니다. 그리기 이미지는 이미지 개체의 온로드 시 구현되어야 합니다.

아아아아

위 내용은 HTML5 캔버스에 이미지를 그리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!