Easy-Micro


LANGAGE HTML5 CANVAS
Canvas tracé

Faire des tracés dans un canvas HTML5

Tracé dans un canvas avec javascript

  • Un tracé est initialisé par la méthode beginPath()
  • On commence avec moveTo(x,y)
  • puis la ligne lineTo(x,y)
  • et on ferme le chemin avec closePath()

Attention, celle-ci ne doivent être appelées qu'a le fin du code.

La forme n'apparait qu'avec l'appel d'une des deux méthodes :
  • fill() pour remplir
  • stroke() pour le contour


Exemple :
<canvas id="monCanvas" width="200" height="100" style="border:1px dotted #0000ff;"></canvas>

<script type="text/javascript">
var c = document.getElementById(" monCanvas ");
var ctx=c.getContext('2d');

ctx.beginPath(); // Début du chemin
ctx.moveTo(50,50); // Le tracé part du point 50,50
ctx.lineTo(200,200); // Un segment est ajouté vers 200,200
ctx.moveTo(200,50); // Puis on saute jusqu'à 200,50
ctx.lineTo(50,200); // Puis on trace jusqu'à 50,200
ctx.closePath(); // Fermeture du chemin (facultatif)

ctx.stroke(); // Application du contour
</script>



Multiple tracé dans un canvas avec javascript

Exemple :

<canvas id="monCanvas2" width="350" height="350" style="none"></canvas>

<script type="text/javascript">
var c2 = document.getElementById(" monCanvas2 ");
var ctx2=c2.getContext('2d');

for (i = 20; i > 0; i--) {
ctx2.strokeStyle = "black";
ctx2.lineWidth = i;
ctx2.beginPath();
ctx2.moveTo(15, 20 + (20 - i) * 24);
ctx2.lineTo(235, 20 + (20 - i) * 24);
ctx2.stroke();
}

</script>


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Samedi 24 août 2019 - Semaine 34 - Saint Barthélémy (Demain: Saint Louis)
Aujourd'hui, c'est l'anniversaire de Jean Michel Jarre (1948-71 ans), compositeur français de musique électronique (Oxygène). Autre 24 août: 1572 - Massacre des protestants par les catholiques.
Haut de page Easy-Micro