canvas 交差点计算

  //判断是否有交叉点
  function intersects(seg) {
    var p = intersection(seg); //获取交叉点位置（字符串形式）
    p = p.split(",");
    //根据或得到的交叉点位置计算，*true*有交叉点false没有
      var Boole = p[0] > Math.min(seg.p1.x, seg.p2.x) && p[0] < Math.max(seg.p1.x, seg.p2.x) && p[0] > Math.min(seg.p3.x, seg.p3.x) && p[0] < Math.max(seg.p4.x, seg.p4.x)
      if(Boole){
        return p;  //把有交叉点的坐标值返回
      }
   };
    //计算交叉点
    function intersection(seg) {
      var x1 = seg.p1.x,
          y1 = seg.p1.y,
          x2 = seg.p2.x,
          y2 = seg.p2.y,
          x3 = seg.p3.x,
          y3 = seg.p3.y,
           x4 = seg.p4.x,
          y4 = seg.p4.y,
          nx, ny, d;

            d = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
            nx = (x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4);
            ny = (x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4);

            return Math.round(nx / d)+","+ Math.round(ny / d);
      };

//这边我模拟了一个参数值
var seg = { p1:{ x:100,y:100 }, p2:{ x:700,y:700 }, p3:{ x:100,y:300 }, p4:{ x:700,y:500 } }

其次就是基本---html部分

<canvas id="canvas" width="600px" height="600px" ></canvas>

js部分

window.onload=function(){
                
    var seg = { p1:{ x:100,y:100 }, p2:{ x:700,y:700 }, p3:{ x:100,y:300 }, p4:{ x:700,y:500 } }
    var c = document.querySelector('#canvas'),w, h, s1, s2,
        ctx = c.getContext('2d');
        ctx.strokeStyle = 'red';
        ctx.beginPath();
        ctx.moveTo(p1.x,p1.y)
        ctx.lineTo(p2.x,p2.y)
                ctx.fill();
        ctx.stroke()
                ctx.beginPath();
        ctx.moveTo(100,300)
        ctx.lineTo(700,500)
        ctx.strokeStyle = 'green';
        ctx.closePath();
            ctx.fill();
        ctx.stroke()
        var arr = intersects(seg);
        if(arr){
            ctx.font = "18px bold 黑体";
            ctx.fillStyle = "#ff0";
            var msg = arr
            ctx.fillText("要写的文字", msg[0], msg[1]);
        }

}

效果图

简单说明多条效果也是一样

for(var i=0;i+1<arrX.length;i++){
        var seg = { p1:{ x:0,y:0 }, p2:{ x:0,y:0 }, p3:{ x:0,y:0 }, p4:{ x:0,y:0 } }
        for(var j=0;j+1<arrX[i].length;j++){
          seg.p1.x = segX[i][j]+ padding
          seg.p1.y = segY[i][j]
          seg.p2.x = segX[i][j+1]+ padding
          seg.p2.y = segY[i][j+1]
          seg.p3.x = segX[i+1][j]+ padding
          seg.p3.y = segY[i+1][j]
          seg.p4.x = segX[i+1][j+1]+ padding
          seg.p4.y = segY[i+1][j+1]
          var arr = intersects(seg);
          if(arr){
            canvas.font = "8px bold 黑体";
            var msg = arr
            var num1 = (msg[0]/(width - padding - num)*sumX+minX).toFixed(2)
            var num2 =(((height - padding)-Number(msg[1]))/(height -  padding- num)*maxNum).toFixed(2)
            canvas.fillText("载荷（%）"+ num1+"  电流（A）"+num2, msg[0], msg[1]);
            canvas.stroke()
          }
          
        }
      }

多交叉点线状图