在html5画布中选择并更改一行的颜色？

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中发现了这个并没有多大帮助.如何选择在HTML5 Canvas上绘制的线条？.我想知道是否有预编写的代码,所以我不需要从头开始编写代码.

我在想是否可以在移动时找到鼠标的位置,每次检查鼠标的位置是否在线上,如此处查找点是否在一条线上.请帮忙并建议是否有任何预先编写的代码,因为我受到时间的限制.先感谢您.

Answer 1

你必须遍历你的线阵列,并为每个线段做:

核心原则是在路径中添加一行,然后测试if(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为更大的值(无需重绘).