:tocdepth: 2 .. include:: common.rst.inc L'API Canvas ============ Principe ++++++++ Canvas ------ La balise ```` de HTML5 crée un élément vide, sur lequel le code Javascript peut « dessiner » pour créer des images dynamiquement. .. code-block:: html .. note:: La largeur et la hauteur, fixées dans la balise ``canvas``, représentent sa taille initiale en pixels. Si le canvas est redimensionné par CSS, sa taille d'affichage changera, et ses pixels seront **redimensionnés** en conséquence, mais le *nombre* de pixels (en largeur et en hauteur) ne changera pas. Contexte -------- Pour pouvoir dessiner sur un canvas, il faut d'abord récupérer un objet *contexte* : .. code-block:: javascript var canvas = document.getElementById('mycanvas'); var ctx = canvas.getContext('2d'); Différents types de contexte ---------------------------- * ``2d`` permet de générer des images 2D * ``webgl`` permet de générer des images 3D en utilisant le GPU (cf. http://webgl.org/) * d'autres contextes peuvent apparaître à l'avenir Commandes de bases pour le contexte 2D ++++++++++++++++++++++++++++++++++++++ Définir les couleurs -------------------- * L'attribut ``strokeStyle`` permet de définir la couleur des traits qui seront dessinés. * L'attribut ``fillStyle`` permet de définir la couleur de remplissage. * Ces attributs prennent en paramètre une chaîne, contenant n'importe quelle description de couleur valide en CSS. Exemple : .. code-block:: javascript ctx.strokeStyle = "red"; ctx.fillStyle = "#00FF00"; .. note:: Ces commandes ne dessinent rien par elles-mêmes, elles conditionnent le comportement des commandes lancées ensuite. Dessiner un rectangle --------------------- * La méthode ``strokeRect(x, y, w, h)`` permet de dessiner le contour d'un rectangle, en utilisant la couleur définie par ``strokeStyle``. * La méthode ``fillRect(x, y, w, h)`` permet de dessiner un rectangle plein, en utilisant la couleur définie par ``fillStyle``. * ``x`` et ``y`` indiquent le coin supérieur gauche du rectangle, ``w`` indique sa largeur, ``h`` indique sa hauteur. Ces valeurs sont données en pixels, mais peuvent être des nombres flottants. Exemple : .. code-block:: Javascript ctx.fillRect(canvas.width/4, canvas.height/4, canvas.width/2, canvas.height/2); Largeur de ligne ---------------- En plus de leur couleur, il est possible de choisir la *largeur* des lignes dessinées sur le canvas (par exemple par ``strokeRect``). Ceci se fait en changeant l'attribut ``lineWidth``. Sa valeur est exprimée en pixels (mais peut être un nombre flottant). Pour aller plus loin -------------------- * `Dessiner des formes plus complexes`__ * `Dessiner des images`__ __ https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques#Dessin_de_trajets __ https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Utilisation_d'images Projet ++++++ Votre travail ------------- * Écrivez une application de dessin en utilisant ``canvas`` et le contexte ``2d``. * Il pourra être nécessaire d'utiliser les événements ``mousedown``, ``mousemove`` et ``mouseup``. * Ces événements ont notamment deux attributs ``pageX`` et ``pageY`` indiquant les coordonnées de la souris dans la *page*, à comparer avec les coordonnées de l'élément: ``canvas.offsetLeft`` et ``canvas.offsetTop``. Pour aller plus loin ++++++++++++++++++++ Autres utilisations ------------------- * Un canvas transparent peut être positionné par dessus d'autres éléments (avec une utilisation judicieuse du CSS). * Le contexte ``2d`` peut également faire une "photographie" d'un élément graphique (image, vidéo, autre canvas) de la page à l'aide de la méthode drawImage_. .. _drawImage: http://devdocs.io/dom/canvasrenderingcontext2d/drawimage Autres manières de gérer le graphisme ------------------------------------- Une alternative aux Canvas est SVG (*Standard Vector Graphics*), un langage à balises similaire à HTML mais servant à décrire des images. Ce langage est intégré à HTML5 et peut notamment être manipulé dans l'arbre DOM par du code Javascript. Exemple : .. code-block:: xml .. raw:: html