« Canvas (HTML5) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 124 : Ligne 124 :


=== Images  ===
=== Images  ===
Méthode à utiliser :
Il est possible d'utiliser la fonctionnalité image dans sa forme la plus basique qui comprend l'objet "image" et ses coordonnées "x" et "y".
Dans sa forme la plus complète, elle comporte 9 paramètres.


=== Texte ===  
=== Texte ===  

Version du 22 novembre 2015 à 22:35

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.


Présentation

Qu’est ce que <canvas> ?

L’élément <canvas> a été introduit avec HTML5 ; c’est une API (Application Programming Interface) lien permettant générer et d’animer des graphismes avec du code JavaScript.
Un <canvas> correspond en fait a un espace de pixels initialement transparent qui, armé de Javascript, permet de réaliser des graphismes, partant du simple tracé de courbe, la réalisation d'animations ou encore de jeux vidéos.
Schématiquement, l’élément « canvas> est donc un « conteneur » permettant de dessiner avec le « crayon » Javascript.

Navigateurs supportant <canvas>

Voici les navigateurs qui supporte <canvas> (Novembre 2015)

Canva nov2015.png
















Pour les plus navigateurs les plus souvent utilisés, <canvas> est donc supporté par :

  • Internet Explorer 11
  • Chrome 45 et 46
  • Safari 8 et 9
  • Firefox 40 et 41 (sauf “Extended Releases »)

Si votre navigateur ne supporte pas <canvas>, il faut faire une mise à jour (vérifier votre version et, si besoin, mettez à jour).

Comment fonctionne <canvas> ?

Pour tracer un élément, il faut d’abord comprendre comment fonctionne les coordonnées de <canvas>.

Voici une illustration de la différence entre les coordonnées cartésiennes et les coordonnées de <canvas>

Coordonnées cartésiennes Coordonnées <canvas>
Coordonnées cartésienne.png
Coordonnées canvas.png

Imaginons que nous ayons un <canvas> de 500 pixels sur 500 pixels:

  • le point [0,0] se situe en haut à gauche
  • le point [500,500] se situe en bas à droite
  • le point [0,500] se situe en bas à gauche


Création d’un élément <canvas> et formes de base

Mise en place du code minimal

Pour dessiner un <canvas> pour HTML5, voici le code minimal : 

<!doctype html>
<html>
    <head>
        <title> Tutoriel canvas </title>
    </head>
	 <body>
        <canvas id="mycanvas" width="800" height="400">
            Message pour les navigateurs ne supportant pas encore canvas.
        </canvas>
    </body>
</html>



Opérations de base

Rectangle

Méthode à utiliser : fillRect (x, y, largeur, hauteur);

Paramètre Signification
x Coordonnées du coin supérieur gauche sur l'abscisse
y Coordonnées du coin supérieur gauche sur l'ordonnée
largeur largeur exprimée en pixels
longueur longueur exprimé en pixels


Lignes et tracés

Pour dessiner une ligne, voici les codes à utiliser

  • On commence avec beginPath() = on démarre un nouveau tracé
  • Puis, moveTo(x, y) = point de départ du tracé
  • Ensuite, lineTo(x, y) = point d'arrivée du tracé (ie, on trace la ligne)
  • Enfin, on peut fermer le tracé closePath()

Par exemple (attention, ne pas oublier de récupérer le "context"): 

var ctx = canvas.getContext('2d'); 
ctx.beginPath();      // Début du chemin 
ctx.moveTo(100,100);    // Le tracé part du point 100,100
ctx.lineTo(250,250);  // Un segment est ajouté vers 250,250
ctx.moveTo(200,50);   // Puis on saute jusqu'à 200,50
ctx.lineTo(50,200);   // Puis on trace jusqu'à 50,200
ctx.closePath();      // Fermeture du chemin (facultative)



Cercle

Méthode à utiliser : arc();

Il faut s'imaginer ici que l'on est dans une configuration trigonométrique. Les angles sont définis en radians avec Math.PI; (un tour complet du cercle = 2*Math.PI) et le sens de rotation est contraire aux aiguilles d'une montre lorsqu'il vaut true.

Pour définir un angle, il faut multiplier une valeur en 0 et 2 à Math.PI; pour définir la position de l'angle.

Voici un schéma illustratif :

Mathpi.png


Voici les codes à utiliser pour tracer un cercle:

  • On commence avec beginPath() = on démarre un nouveau tracé (comme pour la ligne)
  • Puis, arc(x, y; rayon, angle de départ, angle de fin) = trace le cercle (en fait, une courbe fermée) en délimitant la forme
  • Ensuite, fill() = permet de colorer le cercle (si vous souhaitez)
  • Enfin, on peut fermer le tracé closePath()

Pour élaborer le code entier, la structure est la même que pour les tracés et donc, il ne faut pas oublier de récupérer le context.
N.B: à la fin de arc(x, y; rayon, angle de départ, angle de fin, anticlock-wise). C'est un boléen, quand il vaut "true", le sens est contraire à celui des aiguilles d'une montre

Images

Méthode à utiliser : Il est possible d'utiliser la fonctionnalité image dans sa forme la plus basique qui comprend l'objet "image" et ses coordonnées "x" et "y". Dans sa forme la plus complète, elle comporte 9 paramètres.

Texte

Couleurs et dégradés

Animation avec <canvas>

A COMPLETER

Outils

A COMPLETER

Bibliothèques
  • Il existe de nombreux bibliothèques qui sont basé sur Canevas
Outils Auteurs
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Canvas_(HTML5)&oldid=51270 »