Question

我有这段代码：

ctx.beginPath();
ctx.moveTo(X1,Y1);
ctx.lineTo(X2,Y2);
ctx.lineTo(X3,Y3);
ctx.lineTo(X4,Y4);
ctx.closePath();
ctx.stroke();

注意：

有四点（A，B，C，D）。
如果X1！== X3
在点之间形成虚线以形成三角形

Answer 1

您必须选择要绘制的形状，这是一个实现图，其中包含四个可能的形状：

＆＃13;

var ctx = canvas.getContext('2d'),
    activePoint,
    dragging,
    names='ABCD';
    pointWidth = 10,
    points=[];

function isBetween(p,f){
   return (f-pointWidth/2 <= p && p <= f+pointWidth/2);
  }

function draw(){
  	ctx.clearRect(0,0,canvas.width,canvas.height);
	if(points.length===4)
		drawTriangle();
  	drawPoints();
 }

function drawPoints(){
	ctx.strokeStyle="black"
	ctx.fillStyle="black"
    for(var i=0; i<points.length; i++){
      ctx.beginPath();
      ctx.arc(points[i].x, points[i].y, pointWidth, 0, 2*Math.PI);
      ctx.stroke();
      }
    ctx.strokeStyle="purple"
	ctx.beginPath();
    for(var i=0; i<points.length-1; i++){
      ctx.moveTo(points[i].x, points[i].y);
      ctx.lineTo(points[(i+1)].x, points[(i+1)].y);
	  ctx.fillText(names[i],points[i].x, points[i].y-pointWidth);
      }
	ctx.stroke();
	ctx.fillText(names[points.length-1],points[points.length-1].x, points[points.length-1].y-pointWidth);
  }

function drawTriangle(){
  var db = {x1:points[3].x, y1:points[3].y, x2:points[1].x, y2:points[1].y};
  var l1 = drawLines(db);
  var ca = {x1:points[2].x, y1:points[2].y, x2:points[0].x, y2:points[0].y};
  var l2 = drawLines(ca);

  var inter = getIntersect(l1, l2);
  if(inter){
    ctx.fillStyle="rgba(255,0,255,.25)";
	ctx.beginPath();
	ctx.lineTo(l1.x1, l1.y1);
	ctx.lineTo(inter.x, inter.y);
	ctx.lineTo(l2.x2, l2.y2);
	ctx.closePath();
	ctx.fill();

    ctx.fillStyle="rgba(0,0,255,.25)";
	ctx.beginPath();
	ctx.lineTo(l2.x1, l2.y1);
	ctx.lineTo(inter.x, inter.y);
	ctx.lineTo(l1.x2, l1.y2);
	ctx.closePath();
	ctx.fill();

    ctx.fillStyle="rgba(255,0,0,.25)";
	ctx.beginPath();
	ctx.lineTo(l1.x1, l1.y1);
	ctx.lineTo(inter.x, inter.y);
	ctx.lineTo(l2.x1, l2.y1);
	ctx.closePath();
	ctx.fill();

    ctx.fillStyle="rgba(255,255,0,.25)";
	ctx.beginPath();
	ctx.lineTo(l2.x2, l2.y2);
	ctx.lineTo(inter.x, inter.y);
	ctx.lineTo(l1.x2, l1.y2);
	ctx.closePath();
	ctx.fill();

  	ctx.fillStyle= "red";
  	ctx.beginPath();
  	ctx.arc(inter.x, inter.y, pointWidth/3, 0, 2*Math.PI);
  	ctx.fill();
	}
  }

function drawLines(pt){
  var segLength = Math.sqrt(Math.pow((pt.x1 - pt.x2), 2) + Math.pow((pt.y1 - pt.y2), 2)),
  startDist = Math.max(canvas.width,canvas.height)*-2,
  endDist = startDist*-1;

  var rX1 = pt.x2 + (pt.x2 - pt.x1) / segLength * startDist;
  var rY1 = pt.y2 + (pt.y2 - pt.y1) / segLength * startDist;

  var rX2 = pt.x2 + (pt.x2 - pt.x1) / segLength * endDist;
  var rY2 = pt.y2 + (pt.y2 - pt.y1) / segLength * endDist;
  ctx.beginPath();  
  ctx.strokeStyle="green";
  ctx.moveTo(rX1, rY1);
  ctx.lineTo(rX2, rY2);
  ctx.stroke();
  
  return {x1:rX1, y1:rY1, x2:rX2, y2:rY2};
}

function getIntersect(l1, l2){
	den = ((l2.y2 - l2.y1) * (l1.x2 - l1.x1)) - ((l2.x2 - l2.x1) * (l1.y2 - l1.y1));
    if (den == 0) {
        return false;
    }
    a = l1.y1 - l2.y1;
    b = l1.x1 - l2.x1;
    num1 = ((l2.x2 - l2.x1) * a) - ((l2.y2 - l2.y1) * b);
    num2 = ((l1.x2 - l1.x1) * a) - ((l1.y2 - l1.y1) * b);
    a = num1 / den;
    b = num2 / den;

    var x = l1.x1 + (a * (l1.x2 - l1.x1));
    var y = l1.y1 + (a * (l1.y2 - l1.y1));
	return {x:x,y:y};
	}

canvas.onmousemove = function(e){
  var rect = this.getBoundingClientRect();
  var x = e.clientX-rect.left;
  var y = e.clientY-rect.top;
  if(!dragging){
    for(var i=0; i< points.length; i++){
       if(isBetween(x, points[i].x) && isBetween(y, points[i].y)){
          this.style.cursor = 'pointer';
          activePoint = points[i];
          return;
         }
      }
    this.style.cursor = 'default';
    activePoint = null;
    }
  else{
    activePoint.x=x; activePoint.y=y;
    draw();
    }
 }

canvas.onmousedown = function(e){
    if(points.length<4){
      var rect = this.getBoundingClientRect();
      var x = e.clientX-rect.left;
      var y = e.clientY-rect.top;
      points.push({x:x, y:y})
      draw();
      }
    if(!activePoint) return;
    dragging = true;
  }

canvas.onmouseup = function(e){
    dragging = false;
  }

＆＃13;

canvas{border: 1px solid red}

＆＃13;

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

＆＃13;

Answer 2

基本上你需要的是：

1. Get the Infinity line of lines AC and BD.
2. Get the intersection point of lines AC and BD.(2nd point).
3. After saving the intersection point choose the infinity lines between A,B,C and D depending on your constraint then make an infinity out of it (3rd point).
4. Go back to your line to serve as a point 1

如何制作三角形图案

2 个答案: