HTML5 CANVASCanvas 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>
<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>
<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>
