Comment dessiner des images sur la toile de javascript pour HTML5 et CSS3 programmation

Bien que HTML a longtemps eu un soutien pour les images, l'interface de toile de javascript ajoute une nouvelle vie à des images 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 les différentes transformations à votre image pour créer des compositions intéressantes et animations.

Comment dessiner une image sur la toile

La meilleure façon d'utiliser une image dans un élément est d'utiliser une image qui est 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 () {// à partir du dessin de image.htmlvar = document.getElementById ("dessin") - var con = drawing.getContext («2D») - var goofyPic = document.getElementById ("goofyPic") - con.drawImage ( goofyPic, 0, 0, 50, 50) -var image2 = 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 le souhaitez, vous pouvez cacher la étiquette avec code CSS de sorte que seule la version dans la toile est visible.

2. Créer une variable javascript pour l'image.

   Utilisez l'ordinaire document.getElementById () à créer un mécanisme variable qui fait allusion à l'image.

3. Dessinez l'image sur la toile.

   La drawImage () fonction prend cinq paramètres. Le premier est le nom d'un objet d'image (Il doit être le nom d'une image objet javascript, pas seulement le nom de l'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. Changez la propriété de l'image.

   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 vous apercevrez que vous devez retarder votre programme jusqu'à ce que l'image a terminé le chargement. L'objet d'image comporte une en charge propriété qui accepte une fonction de rappel. Utilisez cette technique pour attendre votre dessin se termine.

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

Dessin partie d'une image

Parfois, vous aurez envie de dessiner une petite partie de l'image originale. Ce programme se concentre sur le centre de la face maladroit:

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 le nom de l'image (pas le nom du fichier, mais le nom du javascript Image objet).

• Coin supérieur gauche de la source: Le premier travail est de choisir la partie de l'image originale qui sera affiché. 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 taille de l'image de destination sur la toile.

Le "dessiner seulement une partie d'une image" technique décrite 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. 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.