HTML5 of 6 __Canvas: insert pictures, execute callback when the pictures are loaded-H5 Tutorial-php.cn

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

黄舟

Release： 2017-02-18 14:29:15

Original

1549 people have browsed it

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>

Copy after login

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