Pages

Peut-on utiliser Canvas dans un article?

mercredi 20 août 2014

Balise Canvas de HTML5
Canvas est un élément HTML 5 qui permet de réaliser un dessin au sein d'une page web au moment de son affichage. Environ 90% des navigateurs supportent Canvas aujourd'hui. Vous trouverez une liste à jour des navigateurs compatibles ici.

Canvas est un outil puissant. Il dispose d'un jeu d'instructions javascript pour afficher des formes 2d et des bitmaps. Il est aussi possible d'inclure et de manipuler des images et des textes. Cet article est une courte introduction à Canvas.



Peut-on utiliser Canvas dans un article?

La première chose à faire est de mettre en place le cadre ('canvas' en anglais) pour le dessin. C'est très simple il suffit d'utiliser la balise <canvas> qui possède les propriétés suivantes: 'width' (largeur), 'height' (hauteur), 'style' et 'id' (identifiant). Pour inclure un cadre de dessin dans votre article vous devez procéder de la manière suivante:
  • Ouvrez l'affichage HTML
  • Saisissez le code suivant à l'endroit où vous souhaitez placer le cadre:
<canvas id="mydrawing" width="400" height="200" style="background: #98FB98; margin-left:50px;">
    Votre navigateur ne supporte pas Canvas.
    <br />
    Désolé!
</canvas>




Voici le résultat:

Votre navigateur ne supporte pas Canvas.
Désolé!



Si le fond (vert pâle: #98FB98) ou la taille du cadre (400 pixels x 200 pixels) ne vous conviennent pas, vous pouvez les modifier. Le texte ('Votre navigateur ...') qui est placé entre les balises ouvrante et fermante de Canvas n'est affiché que si le navigateur n'est pas compatible avec Canvas. Notez qu'il est fortement recommandé de ne pas utiliser les propriétés CSS 'width'(largeur) et 'height' (hauteur) à l'intérieur du style pour éviter les déformations. On se limitera donc aux propriétés 'width' et 'height' de la balise <canvas> comme je l'ai fait dans l'exemple. Les valeurs doivent être saisies sans unités contrairement aux propriétés CSS équivalentes.


 Comment peut-on tracer une ligne dans le cadre?

La séquence d'instructions javascript qui suit trace une ligne rouge du coin supérieur gauche au coin inférieur droit. Cette séquence peut être placée dans le code HTML juste après la balise fermante </canvas> :

<script>
    var mycanvas   = document.getElementById('mydrawing') ;
    if( mycanvas.getContext ) {
       var ctx = mycanvas.getContext('2d');
     
       ctx.beginPath();
       ctx.moveTo(0, 0);
       ctx.lineTo(399, 399);
       ctx.lineWidth = 1 ;
       ctx.strokeStyle = 'Red' ;
       ctx.stroke();      
    }
</script>



Ce script débute par la création d'un 'contexte':
 
    var mycanvas   = document.getElementById('mydrawing') ;
    if( mycanvas.getContext ) {
       var ctx = mycanvas.getContext('2d');
   
    }



Ce code est standard, vous devez simplement remplacer le nom du 'canvas' (dans l'exemple 'mydrawing') par le votre. Voyons maintenant les instructions de dessin:



ctx.beginPath();
Lance la création d'une nouvelle forme ('path')

ctx.moveTo(0, 0);
Place le curseur au point défini par x=0 et y=0

ctx.lineWidth = 1 ;
Fixe l'épaisseur de la ligne.

ctx.strokeStyle = 'Red' ;
Fixe la couleur de la ligne (rouge)

ctx.lineTo(399, 399);
Trace une ligne jusqu'au point défini par x=399px et y=399px

ctx.stroke();
Lance l'exécution de la série d'instructions et trace la ligne.

Voici le résultat:


Votre navigateur ne supporte pas Canvas.
Désolé!



Comment peut-on insérer du texte dans le cadre ?

Vous pouvez mettre du texte dans un 'canvas'. Voici une séquence d'instructions javascript qui va ajouter du texte à notre cadre vert:

<script>
    var mycanvas   = document.getElementById('mydrawing') ;
    var ctx = mycanvas.getContext('2d');

    // first text
    ctx.font = '46px Comic Sans MS' ;
    ctx.lineWidth = 3 ;
    ctx.strokeStyle = "green";
    ctx.strokeText("Trucs de Blogger",15,100);

    // second text
    ctx.font = '20px Verdana' ;
    ctx.lineWidth = 4 ;
    ctx.fillStyle = "red";
    ctx.fillText("Gagnez de l'argent avec votre blog!",20,130) ;

</script>


Comme dans l'exemple précédent, ce script peut être placé juste après la balise de fermeture du 'canvas'. Quelques commentaires sur cette séquence d'instructions:


ctx.font 
Police à utiliser et taille de celle-ci

ctx.lineWith
épaisseur du trait
ctx.strokeStyle
couleur du contour des lettres 

 
ctx.strokeText
Ecriture du contour dutexte. Cette commande a 3 paramètres: le texte lui-même, les coordonnées x et y du début du texte.  

ctx.fillStyle 
Couleur de remplissage des lettres


ctx.fillText 
Ecriture du texte rempli. De la même façon que pour strokeText, cette commande prend aussi 3 paramètres (texte, x, y)


Notez que si vous produire des lettres dont le contour est d'une couleur différente que le remplissage, vous devrez utiliser 'fillStyle', 'fillText', 'strokeStyle' et 'strokeText'. Il est recommandé dans ce cas d'utiliser 'fillText' avant 'strokeText' pour obtenir un meilleur dessin des lettres. 

Voila le résultat du script:

Votre navigateur ne supporte pas Canvas.
Désolé!



Dans un futur post je reviendrai sur l'élément 'canvas' de HTML 5. Il y a encore beaucoup à dire...

Bon blog!


(J'ai publié l'original de cet article en anglais ici.)

Aucun commentaire:

Enregistrer un commentaire