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

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

黄舟original: 2017-02-18 14:29:151547parcourir

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>

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：HTML5-5 __Canvas : DégradéArticle suivant：HTML5-5 __Canvas : Dégradé

Articles Liés

Voir plus