Coordonnées des pixels dans 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 pixel en haut à gauche, se trouve dans le carré de coordonnées :
(0.5, 0.5) ; (1.5, 0.5) ; (1.5, 1.5) ; (0.5, 1.5)
Son centre a la coordonnée : (1.0, 1.0)
La coordonnées du centre du point en bas à droite sont (c.width, c.height)
Il se trouve dans le carré de cooronnées :
(c.width-0.5, c.height-0.5) ; (c.width+0.5, c.height-0.5) ; (c.width+0.5, c.height+0.5) ; (c.width-0.5, c.height+0.5)

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 haut : (0.5, 0.5)


Position X=   entre 0.0 et 6.0 ;       Position Y=   entre 0.0 et 6.0

   
Si on ne donne pas des coordonnées entières, 4 pixels sont modifiés !
Les divisions de la graduation représentent des fractions de positions de pixels !
Version plus sophistiquée, qui tient compte
de la superposition de pixels de niveaux de gris différents.

Pour tracer une ligne verticale qui rempli la première colonne
de pixels, les deux instructions suivantes font le travail :
ctx.moveTo(1.0, 0.5);
ctx.lineTo(1.0, c.height+0.5); // segment vertical
 La coordonnée   1.0   indique le centre du pixel.
La colonne suivante utilisera la coordonnée 2.0, la suivante 3.0, etc.

Les trois instructions suivantes :
ctx.lineWidth = 2; // largeur de lignes
ctx.moveTo(1.5, 0.5);
ctx.lineTo(1.5, c.height+0.5); // 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   arrow   bgweb.html   arrow   exemples.html   arrow   a3js1060_canvas_coordonnees.html

Page mise à jour le 27 janvier 2024 par Bernard Gisin
Hébergement par : www.infomaniak.ch