Comment faire de la largeur de ligne pour une ligne personnalisée dans le canevas html5

Question

Je souhaite modifier la largeur d'une ligne, mais pourquoi toutes les lignes dans le canevas sont également modifiées?

Bellow est mon extrait de code

let c_canvas = document.getElementById("c"); 
 
let context = c_canvas.getContext("2d"); 
 
let gradientFill = context.createLinearGradient(400, 0, 95, 305); 
 
gradientFill.addColorStop(0, "rgba(195, 42, 28, 1.000)"); 
 
gradientFill.addColorStop(0.6, "rgba(252, 239, 55, 1.000)"); 
 
gradientFill.addColorStop(1, "rgba(12, 151, 206, 1.000)"); 
 
context.fillStyle = gradientFill; 
 
context.fillRect(0, 0, 500, 500); 
 
    context.beginPath(); 
 
for (let x = 0.5; x <= 501; x += 100) { 
 
    context.moveTo(x, 0); 
 
    context.lineTo(x, 500); 
 

 
} 
 

 
for (let y = 0.5; y <= 501; y += 100) { 
 
    context.moveTo(0, y); 
 
    context.lineTo(500, y); 
 
} 
 

 
    context.lineWidth = 1; 
 
    context.stroke(); // Draw it 
 
    
 
let frectx = 100; 
 
let frecty = 450; 
 
let lrectx = 250; 
 
let lrecty = 340; 
 
let radius = 15; // for example 
 
let font = "bold " + radius + "px serif"; 
 
let text = "1"; 
 
let rand =[]; 
 
for(let i=0; i<5; i++) 
 
{ 
 
rand[i] = Math.floor((Math.random() * 6) + 1); 
 

 
} 
 

 
rand.forEach(function(entry,i) { 
 
text = i+1; 
 
frectx = entry*70; 
 
frecty = Math.floor((Math.random() * 9) + 1)*50; 
 

 
context.moveTo(frectx, frecty); 
 
context.lineTo(lrectx, lrecty); 
 
    context.lineWidth = 8; 
 

 
context.strokeStyle = "#ddd"; 
 
context.stroke(); 
 
context.fillStyle = "white"; 
 

 
context.beginPath(); 
 
context.arc(frectx, frecty, 10, 0, 2 * Math.PI); 
 
context.stroke(); 
 
context.closePath(); 
 
context.fill(); 
 
context.fillStyle = "black"; // font color to write the text with 
 

 
context.font = font; 
 
context.textBaseline = "top"; 
 
context.fillText(text, frectx - radius/4, frecty - radius/2); 
 

 
context.fillStyle = "white"; 
 

 
context.beginPath(); 
 
context.arc(lrectx, lrecty, 10, 0, 2 * Math.PI); 
 
context.stroke(); 
 
context.closePath(); 
 
context.fill(); 
 
context.fillStyle = "black"; // font color to write the text with 
 
context.font = font; 
 
context.textBaseline = "top"; 
 
context.fillText(text, lrectx - radius/4, lrecty - radius/2); 
 
})

<canvas id="c" width="501px" height="501px"></canvas>

ou vous pouvez voir dans jsFiddle:

https://jsfiddle.net/dyaskur/t4fgLs73/

Comment changer seulement la largeur en ce que les lignes à l'intérieur de la boîte?

Ma deuxième question est de savoir comment transformer ma ligne et mon cercle pour qu'ils brillent/changent de couleur lorsque je les survole.

Answer 1

Un context.beginPath() manque entre

context.lineWidth = 1; 
context.stroke(); // Draw it 

et

context.lineTo(lrectx, lrecty); 
    context.lineWidth = 8; 

context.strokeStyle = "#ddd"; 
context.stroke(); 

Sans beginPath vous appelez sont re-Caresser simplement tout ou les chemins et sous-chemins déjà définis avec le nouveau style de course et de la largeur.

La réponse générale à la deuxième partie de votre question est que vous n'avez pas à faire cela.

Peindre une toile équivaut à dessiner une image. Vous pouvez déterminer la position de la souris sur l'image, mais vous devrez alors travailler (dans votre programme) si la souris est sur certains pixels que vous voulez changer et redessiner la toile si c'est le cas. Si vous souhaitez utiliser les pseudo-classes CSS :hover pour modifier la présentation, vous devez construire le code source d'un élément SVG pour le graphique, créer l'élément à partir du code source généré et fournir le code CSS approprié pour l'enfant de l'élément SVG les nœuds qui seront affectés par la position de la souris.