html5 canvas에서 사용자 정의 선의 선 너비 만드는 법

Question

선 너비를 변경하고 싶지만 캔버스의 모든 선 너비도 변경되는 이유는 무엇입니까?

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

방법 만 상자 안에 그 라인 폭을 변경하려면 :

우는 내 코드

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에서 볼 수있다?

내 두 번째 질문은 내 라인과 원을 어떻게 변하게 할 것인가?

Answer 1

context.beginPath()이 beginPath없이

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

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

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

사이

누락은 당신은 단순히 다시 쓰다듬어 전부 또는 경로 및 하위 경로 이미 새로운 획 스타일과 폭으로 정의된다 호출.

질문의 두 번째 부분에 대한 일반적인 대답은이 작업을 수행하지 않는다는 것입니다.

캔버스 페인팅은 이미지 그리기와 같습니다. 이미지 위에 마우스가있는 곳을 찾아 낼 수는 있지만, 마우스가 변경하려는 픽셀 위에 있으면 캔버스를 다시 그려야합니다 (프로그램에서).

프리젠 테이션을 변경하기 위해 CSS 클래스 :hover 의사 클래스를 사용하려면 그래픽을위한 SVG 요소의 소스 코드를 생성하고, 생성 된 소스 코드에서 요소를 생성하고, SVG 요소의 하위 요소에 적절한 CSS를 제공해야합니다 마우스 위치에 영향을받는 노드.