如何在html5畫布中爲自定義線條製作線條寬度

Question

我想要更改線條寬度，但爲什麼畫布中的所有線條寬度也會發生更改？

貝婁是我的代碼片段

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>

，或者你可以的jsfiddle看到：

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

如何只改變寬度在箱體內部的線路？

我的第二個問題是如何讓我的線條和圓形變換髮光/改變顏色時，我徘徊它？

Answer 1

一個context.beginPath()被

和

之間

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

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

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

失蹤沒有 beginPath叫你只是重新撫着全部或路徑和子路徑已經與新的筆觸樣式和寬度定義。

問題的第二部分的一般答案是，你不會這樣做。

繪畫畫布相當於繪製圖像。您可以計算出鼠標位於圖像上的位置，但是如果鼠標移過要更改的某些像素，並且重新繪製畫布（如果是），則需要解決（在您的程序中）。

如果您想使用CSS類僞造類來更改表示，您需要爲圖形構建SVG元素的源代碼，從源代碼生成元素併爲SVG元素的子元素提供適當的CSS將受鼠標位置影響的節點。