Comment inclure des images sur votre page web avec toile HTML5

Alors que HTML a longtemps eu un soutien pour les images, les toile

interface HTML5 ajoute une nouvelle vie à des images sur le Web. Les images peuvent être affichés à l'intérieur d'une toile, où ils peuvent être intégrés avec les techniques de dessin vectoriel de l'API de toile. Vous pouvez également sélectionner une partie d'une image à afficher, et appliquer diverses transformations à votre image pour créer des compositions intéressantes et animations.

Cette figure montre une image dessinée deux fois sur un élément canvas.

Dessin d'une image sur la toile HTML5

La meilleure façon d'utiliser une image dans un élément canvas est d'utiliser une image déjà disponible sur la page Web. Vous pouvez mettre une image sur la page avec l'ordinaire étiqueter et utiliser le CSS display: none exclure pour rendre l'image invisible. Une autre approche est de créer un Image objet en javascript et appliquer la src attribuer à connecter cette image à un fichier d'image spécifique. Pour des exemples de ces deux techniques, considérez le code HTML suivant:

Toile non pris en charge

Le code javascript suivant affiche l'image dans la toile:

 fonction draw () {var dessin = document.getElementById ("dessin") - var con = drawing.getContext («2D») - var goofyPic = document.getElementById ("goofyPic") - con.drawImage (goofyPic, 0, 0 , 50, 50) image2 -var = new Image () - image2.src = "andyGoofy.jpg" -con.drawImage (image2, 100, 100, 70, 50) -} // fin de tirage

Voici comment faire:

1. Créer l'image dans la page principale.

   
   
   
   
   

   La meilleure façon d'accéder à une image est d'utiliser HTML ordinaire à intégrer l'image dans la page principale. Si vous voulez, vous pouvez cacher la étiquette avec code CSS (display: none) de sorte que seule la version dans la zone de dessin est visible.

2. Créer une variable javascript pour l'image avec le document.getElementById () mécanisme.

3. Dessinez l'image sur la toile avec le drawImage () fonction.

   Le premier des cinq paramètres est le nom d'un objet de l'image. (Il doit être le nom d'un objet image javascript, pas seulement le nom de fichier d'une image.) Les deux paramètres suivants sont les valeurs X et Y du coin supérieur gauche de l'image, et les deux derniers paramètres sont la taille de l'image (largeur et hauteur).

4. Créer un javascript Image objet.

   Si vous ne voulez pas intégrer une image dans la page, vous pouvez utiliser javascript pour créer une image dynamique. Utilisez le nouvelle image () constructeur pour construire une nouvelle image.

5. Changer l'image de src propriété.

   Si vous créez une image javascript, vous devez spécifier le src attribuer pour indiquer le fichier associé à l'image. Il pourrait prendre un certain temps pour l'image à charger.

L'image ne sera pas afficher jusqu'à ce qu'il a été chargé à partir du serveur. Dans la plupart des cas, ce ne sera pas un problème, mais parfois vous avez besoin de retarder votre programme jusqu'à ce que l'image a terminé le chargement. La Image objet a une en charge propriété qui accepte une fonction de rappel. Utilisez cette technique pour attendre la fin de votre dessin:

image.onload = finishDrawing fonction finishDrawing () {// reste de dessin Code va ici}

Dessin partie d'une image sur la toile HTML5

Parfois, vous voulez dessiner une petite partie de l'image originale. Un programme qui se concentre sur le centre de la face maladroit ressemble à ceci:

Il est assez facile de tirer partie d'une image. Utilisez la même drawImage () commande, mais cette fois utiliser une version avec neuf paramètres:

con.drawImage (goofyPic, 60, 70, 90, 90, 0, 0, 150, 150) -

Voici ce que signifient tous ces paramètres:

• Nom de l'image: Le premier paramètre est l'objet de l'image (pas le nom du fichier, mais le nom du javascript Image objet).

• Coin de la source en haut à gauche: Le premier travail est de choisir la partie de l'image originale à afficher. Les deux paramètres suivants indiquent le coin supérieur gauche d'une sélection sur l'image originale. (Vous pouvez utiliser un éditeur d'image comme Gimp ou IrfanView pour déterminer la position et la taille de la sélection.)

• Hauteur et largeur de la source: Les deux paramètres suivants indiquent la hauteur et la largeur de la sélection de la source.

• Position de destination: Les deux paramètres suivants sont la position du coin supérieur gauche de l'image sur la toile.

• Taille de destination: Les deux derniers paramètres décrivent la hauteur et la largeur de l'image de destination sur la toile.

La technique de sous-image décrit ici est très utile car il vous permet de combiner plusieurs images en une seule image (parfois appelé feuille de sprite). Cela diminue les frais généraux pour délivrer l'image. (Une grande image est plus rapide à administrer que plusieurs petits.) Il est également fréquemment utilisé dans les jeux et animations où une entité peut avoir plusieurs images affichées en séquence pour suggérer la marche ou d'attaquer.