Tracer un arc avec le canvas 2D et SVG

Comment tracer un arc d’un angle donné, centré sur un point O donné et à partir d’un point A donné, avec le contexte 2d du canvas et avec SVG ? En plus d’être des technologies différentes, le canvas et SVG ne se fondent pas sur la même technique pour décrire un arc…
Tracé d'un arc
La tâche n’a rien d’évident, comme il est possible d’en juger d’après le code permettant de la remplir dans l’un et l’autre cas :
  • Avec le contexte 2d du canvas, il faut demander le tracé d’un chemin en utilisant les fonctions moveTo (x0, y0) et arcTo (x1, y1, x2, y2, r), l’arc étant défini comme la plus petite partie du cercle de rayon r tangent aux droites joignant les points de tangence de ce cercle avec la droite de (x1, y1) à (x0, y0), d’une part, et avec la droite de (x1, y1) à (x2, y2), d’autre part.
  • En SVG, il faut demander le tracé d’un chemain en utilisant un objet path dont l’attribut p prend la valeur M x0 y0 A r r 0 largeArc sweep x1 y1, où (x0, y0) est le point de départ de l’arc et (x1, y1) son point d’arrivée, le cercle dont l’arc est une partie étant de rayon r et de centre déterminé par une combinaison de largeArc et sweep.

Continuer la lecture de « Tracer un arc avec le canvas 2D et SVG »

Tracer un arc avec le canvas 2D et SVG

Désactivation de l’anti-aliasing du canvas 2D

Comment désactiver l’antialiasing par défaut dans le canvas ? L’anti-aliasing est le traitement qui permet de limiter la perception de l’effet d’escalier que la juxtaposition de pixels aux couleurs contrastées peut générer du fait de leur forme rectangulaire.
Ce traitement peut se révéler gênant dans certains cas (dessin au pixel, jeu old school, etc.), car il n’y a plus de certitude sur les pixels qu’une opération graphique vient modifier.
Par exemple, sur un canvas où on aura d’abord dessiné un rectangle jaune :
context2d.strokeStyle = "rgb (255, 255, 0)";
context2d.fillStyle = "rgb (0,255, 0)";
context2d.fillRect (2, 2, 1, 1);
context2d.strokeRect (1, 1, 2, 2);
Anti-aliasing avec fillRect () et strokeRect ()

Continuer la lecture de « Désactivation de l’anti-aliasing du canvas 2D »

Désactivation de l’anti-aliasing du canvas 2D