Question

我想更改线宽，但为什么画布中的所有线条宽度也都会改变？

Bellow是我的代码段

＆＃13;

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

＆＃13;

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

＆＃13;

或者你可以在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 :hover伪类来更改表示，则需要为图形构造SVG元素的源代码，从生成的源代码创建元素，并为其提供适当的CSS。 SVG元素的子节点将受到鼠标位置的影响。

如何在html5画布中为自定义行创建线宽

1 个答案: