Comment dessiner des images dans un canevas HTML5-Tutoriel H5-php.cn

Comment dessiner des images dans un canevas HTML5

不言

Libérer： 2018-12-01 17:30:15

original

4692 Les gens l'ont consulté

Canvas est un nouveau canevas en HTML5, alors comment le canevas HTML5 dessine-t-il des images ? Cet article vous présentera la méthode de dessin d'images sur un canevas HTML5. Jetons un coup d'œil au contenu spécifique.

HTML5 canvas

Regardons d'abord directement l'exemple de code

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
    function draw() {
      var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
      if (!canvas || !canvas.getContext) {
        return false;
      }
      var context = canvas.getContext(&#39;2d&#39;);
      var img = new Image();
      img.onload = function onImageLoad() {
        context.drawImage(img, 128, 40);
      }
      img.src = &#39;img/flower.jpg&#39;;
    }
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

Copier après la connexion

Explication : lorsqu'on dessine sur le canevas, il est courant d'obtenir le contexte du processus.

Préparez l'image à dessiner sur la toile. Créez un objet Image.

  var img = new Image();

Copier après la connexion

Dessinez une image sur le canevas en utilisant la méthode drawImage() du contexte Canvas. Les coordonnées X et Y sont données pour dessiner l'objet Image comme premier paramètre et l'image comme deuxième troisième paramètre. Le chargement de l'image de l'objet Image étant géré de manière asynchrone, il doit être prêt avant que l'image de l'objet Image ne soit prête. . Par conséquent, nous implémentons le traitement du dessin sur l'événement onload de l'objet Image, et enfin traitons les paramètres de l'image source

img.onload = function onImageLoad() {
    context.drawImage(img, 128, 40);
  }
  img.src = &#39;img/flower.jpg&#39;;

Copier après la connexion

Le résultat en cours d'exécution

Ouvrez le fichier HTML dans un navigateur Internet. Le résultat est présenté ci-dessous, l'image est dessinée sur la toile.

HTML5 canvas

Remarque : Dans le cas du code suivant, il n'y a aucune garantie que l'image de l'objet Image sera lue lors de l'exécution de drawImage. Cela peut donc se produire lors de l'affichage de l'image. Les images de dessin doivent être implémentées lors du chargement de l’objet Image.

<script type="text/javascript">    
function draw() {
      var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
      if (!canvas || !canvas.getContext) {
              return false;
      }
      var context = canvas.getContext(&#39;2d&#39;);
      
      var img = new Image();
      img.src = &#39;img/flower.jpg&#39;;
      context.drawImage(img, 128, 40);
    }
  </script>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!