javascript - 在 html5 Canvas 中选择并更改线条的颜色？

Question

我写这段代码是为了绘制随机图。我一直在徒劳地寻找如何在图中选择一条线，以便我可以在选择线时应用 prim 算法，看看它们是否找到了最小树。

 function draw(n,rep){
        var cvs=document.getElementsByTagName('canvas')[0];   
        /** 
         * @type CanvasRenderingContext2D 
         **/
        var ctx=cvs.getContext('2d');
        ctx.beginPath();
        var randomX=[];
        var randomY=[];
        ctx.lineWidth=2;
        ctx.font  = '3'+' Arial';
        var weights=[];
        var lastRandomx=Math.random()*200;
        var lastRandomy=Math.random()*200;
        for (var i = 0; i <n ; i++) {
            var cwidth = cvs.width;
    var cheight = cvs.height;                
            randomX[i] = Math.random()*cwidth*2/3;
    randomY[i] = Math.random()*cheight*2/3;
            weights[i]=Math.round(Math.random()*20);                        
            ctx.fillRect(randomX[i],randomY[i],5,5);        
    ctx.moveTo(lastRandomx,lastRandomy);
    ctx.lineTo(randomX[i],randomY[i]);               
            lastRandomx=randomX[i];
            lastRandomy=randomY[i];
        }
        for (var i = 0; i < rep; i++) {
            var rand=Math.round(rep*Math.random());
            ctx.lineTo(randomX[rand],randomY[rand]);
        } 
        ctx.closePath();
        ctx.stroke();
};  

我在 stackoverflow 中找到了这个，但没有太大帮助。 How to select lines that are drawn on a HTML5 Canvas? .我想知道是否有预先编写的代码，这样我就不需要从头开始编写了。

我在想是否可以在鼠标移动时找到鼠标的位置，并且每次检查鼠标的位置是否在线上，如此处 Finding if a point is on a line .请帮助并建议是否有任何预先编写的代码，因为我受时间限制。先感谢您。

Answer 1

您必须遍历您的线阵列并为每个线段执行:

核心原理是在路径中添加一行，然后测试(x,y)是否在该行上:

ctx.beginPath();
ctx.moveTo(x1, y1);  // start of line
ctx.lineTo(x2, y2);  // end of line

// this will test the point against the line (lineWidth matters)
if (ctx.isPointInStroke(x, y)) {
    // draw line segment in f.ex. different color here
    ctx.strokeStyle = "red";
    ctx.stroke();    // we already have a line segment on the path
}

无需实际描边，只需重建路径即可。根据需要采用。

这是一个完整的例子:

var ctx = canvas.getContext("2d"),
    lines = [],  // store line segments for demo
    count = 10,  // max 10 lines for demo
    i = 0;

for(; i < count; i++) {
  var x = Math.random() * canvas.width;  // random point for end points
  var y = Math.random() * canvas.height;
  
  if (i) ctx.lineTo(x, y);  // if not first line, add lineTo
  else ctx.moveTo(x, y);    // start point
  
  lines.push({              // store point to create a poly-line
    x: x,
    y: y
  });
}

ctx.lineWidth = 5;
ctx.lineJoin = "round";
ctx.strokeStyle = "blue";
ctx.stroke();              // ..and draw line

// here we use the principle
canvas.onclick = function(e) {

  var r = canvas.getBoundingClientRect(), // adjust to proper mouse position
      x = e.clientX - r.left,
      y = e.clientY - r.top,
      i = 0
  
  // for each line segment, build segment to path and check
  for(; i < count - 1; i++) {
    ctx.beginPath();                        // new segment
    ctx.moveTo(lines[i].x, lines[i].y);     // start is current point
    ctx.lineTo(lines[i+1].x, lines[i+1].y); // end point is next
    if (ctx.isPointInStroke(x, y)) {        // x,y is on line?
      ctx.strokeStyle = "red";              // stroke red for demo
      ctx.stroke();
      break;
    }
  }
}

<canvas id=canvas width=500 height=500></canvas>

要增加灵敏度，您可以将 lineWidth 调整为更大的值(无需重绘)。