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

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
beginPath()
beginPath()
num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
const canvas = document.querySelector("canvas");
2
const ctx = canvas.getContext('2d');
3
ctx.beginPath();
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext('2d');
ctx.beginPath();

DéfinitionDessiner

Déplacer le stylo en (x,y)

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
moveTo(x,y)
moveTo(x,y)

Tracer une ligne jusque (x,y)

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
lineTo(x,y)
lineTo(x,y)

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

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
arc(x, y, rayon, angleDépart, angleFin, sens)
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)

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
quadraticCurveTo(cp1x, cp1y, x, y)
quadraticCurveTo(cp1x, cp1y, x, y)

Courbes de Bézier cubiques

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Définitiontracer

On lance le tracé :

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
ctx.stroke();
ctx.stroke();

ExempleExemple

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
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
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// Triangle
ctx.beginPath();
ctx.moveTo(10, 30);
ctx.lineTo(50, 30);
ctx.lineTo(30, 70);
ctx.lineTo(10, 30);
ctx.closePath();
ctx.stroke();
// Cercle
ctx.beginPath();
ctx.arc(90, 50, 20, 0, 2 * Math.PI);
ctx.stroke();
// Trace courbe
ctx.beginPath();
ctx.moveTo(120, 30);
ctx.quadraticCurveTo(150, 20, 180, 30);
ctx.quadraticCurveTo(160, 50, 180, 70 );
ctx.quadraticCurveTo(150, 90, 120, 70);
ctx.quadraticCurveTo(160, 50, 120, 30);
ctx.stroke();

 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 :
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
1
ctx.closePath();
2
ctx.stroke();
ctx.closePath();
ctx.stroke();
Exemple pour le triangle :
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
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
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

// Triangle
ctx.beginPath();
ctx.moveTo(10, 30);
ctx.lineTo(50, 30);
ctx.lineTo(30, 70);
ctx.closePath();
ctx.stroke();

DéfinitionRemplir
Pour remplir un tracé, il faut remplacer stroke par fill.
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
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
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// Triangle
ctx.beginPath();
ctx.moveTo(10, 30);
ctx.lineTo(50, 30);
ctx.lineTo(30, 70);
ctx.lineTo(10, 30);
ctx.closePath();
ctx.fill();
// Cercle
ctx.beginPath();
ctx.arc(90, 50, 20, 0, 2 * Math.PI);
ctx.fill();
// Trace courbe
ctx.beginPath();
ctx.moveTo(120, 30);
ctx.quadraticCurveTo(150, 20, 180, 30);
ctx.quadraticCurveTo(160, 50, 180, 70 );
ctx.quadraticCurveTo(150, 90, 120, 70);
ctx.quadraticCurveTo(160, 50, 120, 30);
ctx.fill();

 Contenu vu par les navigateurs ne supportant pas canvas 



Canvas - Trajet - Plein