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
A voir également:
- Problème code canvas simple
- Code ascii - Guide
- Code puk bloqué - Guide
- Comment déverrouiller un téléphone quand on a oublié le code - Guide
- 14 simple - Guide
- Code activation windows 10 - Guide
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();
