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/

のみボックス内のその行の幅を変更する方法は？

私の2番目の質問は、ラインとサークルをグローに変える方法/色を変えて色を変える方法です。

Answer 1

context.beginPath()がbeginPathなければ

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

と

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

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

間で不足しているあなたは、単純にすべての、またはすでに新しいストロークスタイルと幅で定義されたパスとサブパス再撫でていると呼びます。

質問の第2部分に対する一般的な答えは、これを行うことができないということです。

キャンバスをペイントすることは、イメージを描画することと同じです。マウスが画像上のどこにあるかを調べることができますが、変更したいピクセルの上にマウスがある場合は、プログラム内で作業してキャンバスを再描画する必要があります。

CSS :hover疑似クラスを使用してプレゼンテーションを変更する場合は、グラフィックのSVG要素のソースコードを作成し、生成されたソースコードから要素を作成し、SVG要素の子に適切なCSSを提供する必要がありますマウスの位置によって影響を受けるノード。