Coordonnées des pixels dans un canvas, version plus sophistiquée

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
Niveau de gris =   entre 0.0 et 1.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 !
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     page18b_canvas_coordonnees.html

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