HTML5 von 6 __Canvas: Bilder einfügen, Rückruf ausführen, wenn die Bilder geladen werden-H5-Tutorial-php.cn

HTML5 von 6 __Canvas: Bilder einfügen, Rückruf ausführen, wenn die Bilder geladen werden

黄舟

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

Original

1629 Leute haben es durchsucht

Mit ein paar einfachen Befehlen, die in die Canvas-API integriert sind, können Sie ganz einfach Bildinhalte zur Leinwand hinzufügen.

Bitte beachten Sie: Sie müssen warten, bis das Bild vollständig geladen ist kann es bedienen. Die Browserbilder werden normalerweise asynchron geladen, während das Seitenskript ausgeführt wird. Wenn Sie versuchen, ein Bild auf die Leinwand zu rendern, bevor es vollständig geladen ist, wird kein Bild angezeigt.

Im folgenden Beispiel wird ein Bild einer Baumrindentextur geladen, das als Vorlage dient Um sicherzustellen, dass das Bild vor dem Rendern vollständig geladen ist, wird hier eine Rückrufmethode bereitgestellt, d. h. der nachfolgende Code wird nur ausgeführt, wenn das Bild geladen ist

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

Nach dem Login kopieren

Führen Sie den Effekt aus Abbildung

Wie Sie sehen können, wird die Onload-Funktion zur bark.jpg hinzugefügt Bild, um sicherzustellen, dass drawTrails nur aufgerufen wird, wenn das Bild geladen wird.

Anhang, bark.jpg Bild:

Das ist es HTML5 von 6 __Canvas: Fügen Sie ein Bild ein und führen Sie den Rückrufinhalt aus, wenn das Bild geladen wird. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www. php.cn)!