HTML5 sur 6 __Canvas : insérer des images, exécuter un rappel lorsque les images sont chargées-Tutoriel H5-php.cn

HTML5 sur 6 __Canvas : insérer des images, exécuter un rappel lorsque les images sont chargées

黄舟

Libérer： 2017-02-18 14:29:15

original

1564 Les gens l'ont consulté

Vous pouvez facilement ajouter du contenu d'image au canevas à l'aide de quelques commandes simples intégrées à l'API canevas

Il convient de noter : vous devez attendre que l'image soit complètement chargée avant de vous. peut le faire fonctionner. Les images du navigateur sont généralement chargées de manière asynchrone pendant l'exécution du script de page. Si vous essayez de restituer une image sur le canevas avant qu'elle ne soit complètement chargée, aucune image ne sera affichée

L'exemple suivant chargera une image d'une texture d'écorce d'arbre pour servir de modèle. Tree Trunk Canvas est utilisé pour garantir que l'image est entièrement chargée avant le rendu, une méthode de rappel est fournie ici, c'est-à-dire que le code suivant ne sera exécuté que lorsque l'image est chargée

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

Copier après la connexion

Exécuter l'effet Figure

Comme vous pouvez le voir, la fonction onload est ajoutée au bark.jpg image pour garantir que drawTrails n'est appelé que lorsque l'image est chargée.

Pièce jointe, bark.jpg Image :

C'est tout HTML5 sur 6 __Canvas : Insérez une image et exécutez le contenu de rappel lorsque l'image est chargée. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www. php.cn) !