Home > Article > Web Front-end > HTML5 of 6 __Canvas: insert pictures, execute callback when the pictures are loaded

HTML5 of 6 __Canvas: insert pictures, execute callback when the pictures are loaded

黄舟Original: 2017-02-18 14:29:151562browse

Using a few simple commands built into the canvas API, you can easily add image content to the canvas.

It should be noted: You must wait until the image is fully loaded before you can operate it. The browser Images are usually loaded asynchronously while the page script is executing. If you try to render an image to the canvas before it is fully loaded, no image will be displayed.

The following example will load an image of a tree bark texture to serve as a tree trunk Canvas is used. To ensure that the image is fully loaded before rendering, a callback method is provided here, that is, the subsequent code will only be executed when the image is loaded

<!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>

Running Effect Picture

As you can see, the onload function is added to the bark.jpg image to ensure that the drawTrails function is only called when the image is loaded.

Attachment, bark.jpg Picture:

The above is the HTML5 6 __Canvas: Insert a picture, and execute the callback content when the picture is loaded. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5-5 __Canvas: GradientNext article：HTML5-5 __Canvas: Gradient

See more

HTML5 of 6 __Canvas: insert pictures, execute callback when the pictures are loaded

Related articles