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:
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:
Voici le résultat:
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:
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:
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