Trajet

Canvas permet de réaliser des trajets en reliant des points à l'aide de segments.

Ces segments peuvent avoir différentes formes.

Pour réaliser un trajet il faut :

  • démarrer le trajet

  • dessiner le trajet

  • tracer le trajet

DéfinitionDémarrer

1
beginPath()
1
const canvas = document.querySelector("canvas");
2
const ctx = canvas.getContext('2d');
3
ctx.beginPath();

DéfinitionDessiner

Déplacer le stylo en (x,y)

1
moveTo(x,y)

Tracer une ligne jusque (x,y)

1
lineTo(x,y)

Arc de cercle : centre (x,y), angle en radian, sens : horaire = true, antiHoraire = false

1
arc(x, y, rayon, angleDépart, angleFin, sens)

Pour les courbes suivantes voir courbe de bézier

Courbe quadratique : position finale (x,y), point de contrôle (cp1x, cp1y)

1
quadraticCurveTo(cp1x, cp1y, x, y)

Courbes de Bézier cubiques

1
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Définitiontracer

On lance le tracé :

1
ctx.stroke();

ExempleExemple

1
const canvas = document.querySelector('canvas');
2
const ctx = canvas.getContext('2d');
3
// Triangle
4
ctx.beginPath();
5
ctx.moveTo(10, 30);
6
ctx.lineTo(50, 30);
7
ctx.lineTo(30, 70);
8
ctx.lineTo(10, 30);
9
ctx.closePath();
10
ctx.stroke();
11
// Cercle
12
ctx.beginPath();
13
ctx.arc(90, 50, 20, 0, 2 * Math.PI);
14
ctx.stroke();
15
// Trace courbe
16
ctx.beginPath();
17
ctx.moveTo(120, 30);
18
ctx.quadraticCurveTo(150, 20, 180, 30);
19
ctx.quadraticCurveTo(160, 50, 180, 70 );
20
ctx.quadraticCurveTo(150, 90, 120, 70);
21
ctx.quadraticCurveTo(160, 50, 120, 30);
22
ctx.stroke();
23
 Contenu vu par les navigateurs ne supportant pas canvas 



Canvas - Trajet
Définitionfermer
Pour fermer une forme, en ramenant le tracé au point de départ, on peut utiliser closePath  avant de tracer :
1
ctx.closePath();
2
ctx.stroke();
Exemple pour le triangle :
1
const canvas = document.querySelector('canvas');
2
const ctx = canvas.getContext('2d');
3
4
// Triangle
5
ctx.beginPath();
6
ctx.moveTo(10, 30);
7
ctx.lineTo(50, 30);
8
ctx.lineTo(30, 70);
9
ctx.closePath();
10
ctx.stroke();
11
DéfinitionRemplir
Pour remplir un tracé, il faut remplacer stroke par fill.
1
const canvas = document.querySelector('canvas');
2
const ctx = canvas.getContext('2d');
3
// Triangle
4
ctx.beginPath();
5
ctx.moveTo(10, 30);
6
ctx.lineTo(50, 30);
7
ctx.lineTo(30, 70);
8
ctx.lineTo(10, 30);
9
ctx.closePath();
10
ctx.fill();
11
// Cercle
12
ctx.beginPath();
13
ctx.arc(90, 50, 20, 0, 2 * Math.PI);
14
ctx.fill();
15
// Trace courbe
16
ctx.beginPath();
17
ctx.moveTo(120, 30);
18
ctx.quadraticCurveTo(150, 20, 180, 30);
19
ctx.quadraticCurveTo(160, 50, 180, 70 );
20
ctx.quadraticCurveTo(150, 90, 120, 70);
21
ctx.quadraticCurveTo(160, 50, 120, 30);
22
ctx.fill();
23
 Contenu vu par les navigateurs ne supportant pas canvas 



Canvas - Trajet - Plein