Discussion :

[Oscar Hiboux]

Salut !

J'ai essayé de jouer avec l'élément canvas d'HTML et j'avoue que c'est plutôt intéressant ! Ceci étant dit, sans plus m'attarder, je suis tombé sur un os et si quelqu'un maîtrisant le sujet pouvait me renseigner j'apprécierais beaucoup.

C'est simple, j'essaye de tracer une forme avec une ligne d'un pixel de large avec le code suivant par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
context.lineWidth = 1;
context.beginPath();
context.moveTo(100, 100);
context.lineTo(200, 100);
context.lineTo(200, 200);
context.lineTo(100, 200);
context.closePath();
context.stroke();

Magnifique, un joli petit carré noir apparaît. Magnifique ? Pas tant que ça : il est tout flou !! Après avoir bidouillé un p'tit peu je me suis rendu compte que si l'on fixait la largeur et la hauteur du canvas à 480×480 par exemple (propriétés canvas.width / height) tout en ayant dimensionné l'élément canvas (DOM) à 240×240 (règles CSS), soit un facteur de 1:2, mon carré devenait net. Seulement, le carré est deux fois plus petit, huh! ^^'
Soit ! Utilisons la fonction "context.scale" en fournissant comme facteur d'échelle 2 pour corriger la bidouille. Et là, c'est tout bon.

Je trouve ça vraiment curieux ! Comment est on sensé procéder pour tracer des formes avec une ligne d'un pixel d'épaisseur sans obtenir des gros pâtés ? Ce n'est d'ailleurs pas là le seul souci. Si par exemple je fixe la largeur de la ligne à 5 (après la bidouille exposée au dessus) les bords de mon carrés sont légèrement flou. À 6 non. À 7 ils sont flous, 8 non, etc. Bref, avec une largeur impaire il y a du flou. J'aimerais qu'on m'explique comment dompter la bête !!

À l'aiiiide !

[Oscar Hiboux]

Au risque de m'attirer les foudres des modérateurs, j'aimerais relancer la communauté à propos du sujet ci-dessus. Je suis vraiment dans l'impasse et j'aimerais tellement pouvoir me servir de cet élément canvas qui a l'air tellement bien...

[Oscar Hiboux]

Bon, et bien, j'ai ma réponse. Je suis d'ailleurs tombé dessus au hazard, mais l'essentiel c'est de l'avoir trouvée !

En fait ce problème vient du fait que la géométrie du canvas se base sur la grille de l'écran, non pas sur les pixels. Je trouve ça assez curieux mais pour éviter l'anti-aliasing il suffit de décaller les coordonnées d'une demi-unité...


Voyez cet article.

Pour avoir des lignes parfaites, sans anti-aliasing, mais un chouia décalée par conséquent, le petit script d'exemple du § "Line Styles" prend la forme suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
ctx.lineWidth = 1+i;
ctx.beginPath();
ctx.moveTo(5+i*14 + (((i+1)%2)?0.5:0),5);
ctx.lineTo(5+i*14 + (((i+1)%2)?0.5:0),140);
ctx.stroke();

Si ça peut aider qqun, ou tout simplement faire découvrir le composant canvas et d'autres concepts...

Bien à vous !