Page Web 18b coordonnées d'un canvas

Votre navigateur ne supporte pas le tag <canvas>.

Les coordoonées dans un canvas sont représentées par des nombres à virgule.
Les points représentés par les coordonnées sont des points au sens mathématiques, qui n'ont pas de surface.
En revanche, les pixels ont une petite surface.
Le sommet en haut à gauche a la coordonnée (0, 0).
Le pixel en haut à gauche, se trouve dans le carré de coordonnées :
(0,0) ; (1, 0) ; (1, 1) ; (0, 1)
La coordonnées du point en bas à droite est (c.width, c.height)

Pour illustrer ce qui précède, imaginons que l'on a zoomé d'un facteur 100 le canvas ci-contre.
Il est donc formé de 5 pixels de large sur 5 pixels de hauteur.

Pressez le bouton ci-dessous, pour afficher le pixel en haut à gauche.
C'est un carré de coté 1 pixel, de sommet gauche : (0, 0)


Position X=   entre 0 et 4 ;       Position Y=   entre 0 et 4

   
Les divisions de la graduation représentent des fractions de positions de pixels !
Pour tracer une ligne verticale qui rempli la première colonne de pixels, les deux instructions suivantes font le travail :
ctx.moveTo(0.5, 0); // positionnement
ctx.lineTo(0.5, c.height); // segment vertical
La coordonnée   0.5   indique le centre du pixel.
La colonne suivante utilisera la coordonnée 1.5, la suivante 2.5 etc.

Les deux instructions suivantes :
ctx.moveTo(1, 0); // positionnement
ctx.lineTo(1, c.height); // segment vertical
traceront une ligne verticale de deux pixels de largeur !
La couleur sera atténuée. Les deux premières colonnes de pixels seront changées !

Plan du Site : Home     page18b_canvas_coordonnees.html


Page mise à jour le 14 février 2015 par Bernard Gisin
Hébergement par : www.infomaniak.ch