suchen

Heim >Web-Frontend >H5-Tutorial >HTML5 von 6 __Canvas: Bilder einfügen, Rückruf ausführen, wenn die Bilder geladen werden

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

黄舟
黄舟Original
2017-02-18 14:29:151601Durchsuche

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>

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


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML5-5 __Canvas: FarbverlaufNächster Artikel：HTML5-5 __Canvas: Farbverlauf

In Verbindung stehende Artikel

Mehr sehen