Problème code canvas simple
Résolu
Isaphira
Messages postés
2
Statut
Membre
-
Isaphira Messages postés 2 Statut Membre -
Isaphira Messages postés 2 Statut Membre -
Bonjour,
Je veux tracer une ligne noire sur le canvas et sur celle-ci une plus petite jaune : je ne comprends pas pourquoi la ligne jaune recouvre totalement la noire (avec une couleur jaune plus nette sur son recouvrement). Quelle est mon erreur ?
Merci de votre aide
// Obtenir le contexte de dessin du canvas
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// dessiner une ligne noire
context.strokeStyle = "black";
context.lineCap = "square";
context.lineWidth = 1;
context.moveTo(52, 1);
context.lineTo(52, canvas.height);
context.closePath();
context.stroke();
// dessiner sur la ligne noire une ligne jaune plus petite
context.strokeStyle = "yellow";
context.lineCap = "square";
context.lineWidth = 1;
context.moveTo(52, 100);
context.lineTo(52, 103);
context.closePath();
context.stroke();
Macintosh / Firefox 108.0
2 réponses
-
Bonjour,
Tu as oublié les beginPath
// Obtenir le contexte de dessin du canvas var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // dessiner une ligne noire context.strokeStyle = "black"; context.lineCap = "square"; context.beginPath(); context.lineWidth = 1; context.moveTo(52, 1); context.lineTo(52, canvas.height); context.closePath(); context.stroke(); // dessiner sur la ligne noire une ligne jaune plus petite context.strokeStyle = "yellow"; context.lineCap = "square"; context.lineWidth = 1; context.beginPath(); context.moveTo(52, 100); context.lineTo(52, 103); context.closePath(); context.stroke();
-
