Problème code canvas simple

Résolu/Fermé

Isaphira Messages postés 2 Date d'inscription dimanche 8 janvier 2023 Statut Membre Dernière intervention 9 janvier 2023 - 8 janv. 2023 à 15:48
Isaphira Messages postés 2 Date d'inscription dimanche 8 janvier 2023 Statut Membre Dernière intervention 9 janvier 2023 - 9 janv. 2023 à 11:04

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 asci - Guide
Code puk bloqué - Guide
Code telephone oublié - Guide
Code blocks free - Télécharger - Langages
Code windows 10 - Guide

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
8 janv. 2023 à 16:20

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();

Réponse 2 / 2

Isaphira Messages postés 2 Date d'inscription dimanche 8 janvier 2023 Statut Membre Dernière intervention 9 janvier 2023
9 janv. 2023 à 11:04

Parfait, merci !

Discussions similaires

Code de renvoi d'appel : Ooredo, Mobilis...

Acces à snapchat temporairement désactivé

code d'activation GTA 5 steam

Erreur 80072EFE windows update

Discussions similaires

Newsletters