집 > 기사 > 웹 프론트엔드 > HTML5/6 __Canvas: 그림 삽입, 그림 로드 시 콜백 실행

HTML5/6 __Canvas: 그림 삽입, 그림 로드 시 콜백 실행

黄舟원래의: 2017-02-18 14:29:151454검색

캔버스 API에 내장된 몇 가지 간단한 명령을 사용하여 캔버스에 이미지 콘텐츠를 쉽게 추가할 수 있습니다.

주의 사항: 이미지가 완전히 로드될 때까지 기다려야 합니다. 브라우저 이미지는 일반적으로 페이지 스크립트가 실행되는 동안 비동기적으로 로드됩니다. 이미지가 완전히 로드되기 전에 캔버스에 렌더링하려고 하면 이미지가 표시되지 않습니다.

다음 예에서는 나무 껍질 텍스처 이미지를 로드하여 렌더링하기 전에 이미지가 완전히 로드되었는지 확인하기 위해 여기에 콜백 메서드가 제공됩니다. 즉, 이미지가 로드될 때만 후속 코드가 실행됩니다.

<!DOCTYPE html>
<html>
  <title>Image example</title>
  <canvas id="trails" style="border: 1px solid;"  width="400" height="400"> </canvas>
  <script>
        // 加载纹理图片
        var bark = new Image();
        bark.src = "bark.jpg";

        // 图片加载完后，将其显示在canvas 上
        bark.onload = function () {
            drawTrails();
        }

        function createCanopyPath(context) {
            context.beginPath();
            context.moveTo(-25, -50);
            context.lineTo(-10, -80);
            context.lineTo(-20, -80);
            context.lineTo(-5, -110);
            context.lineTo(-15, -110);

            context.lineTo(0, -140);

            context.lineTo(15, -110);
            context.lineTo(5, -110);
            context.lineTo(20, -80);
            context.lineTo(10, -80);
            context.lineTo(25, -50);
            context.closePath();
        }

        function drawTrails() {
            var canvas = document.getElementById(&#39;trails&#39;);
            var context = canvas.getContext(&#39;2d&#39;);
            context.save();
            context.translate(130, 250);

            createCanopyPath(context);

            context.lineWidth = 4;
            context.lineJoin = &#39;round&#39;;
            context.strokeStyle = &#39;#663300&#39;;
            context.stroke();

            context.fillStyle = &#39;#339900&#39;;
            context.fill();

            // 用背景图案填充 作为树干的矩形
            context.drawImage(bark, -5, -50, 20, 70);
            context.restore();

            context.save();
            context.translate(-10, 350);
            context.beginPath();
            context.moveTo(0, 0);
            context.quadraticCurveTo(170, -50, 260, -190);
            context.quadraticCurveTo(310, -250, 410,-250);
            context.strokeStyle = &#39;#663300&#39;;
            context.lineWidth = 10;
            context.stroke();
            context.restore();
        }
  </script>
</html>

렌더링 실행

보시다시피, bark.jpg 이미지에 onload 기능이 추가되어 있습니다. drawTrails 함수는 이미지가 로드될 때만 호출됩니다.

첨부 파일,bark.jpg 사진:

위 내용은 HTML5 6 __Canvas: 그림 삽입, 그림 로딩 시 콜백 내용 실행 등 자세한 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고하시기 바랍니다. )!

성명：

이전 기사：HTML5-5 __캔버스: 그라데이션다음 기사：HTML5-5 __캔버스: 그라데이션

HTML5/6 __Canvas: 그림 삽입, 그림 로드 시 콜백 실행

관련 기사