如何在点击时绘制点并将它们与线条 HTML 连接起来

Question

我如何在 html 中创建点（使用 js），然后创建下一个并将它们与线连接？我想使用线条创建不同的形状，然后以某种方式改变这个形状（等三角形）之外的颜色。 请带我去路。

Answer 1

我会推荐使用 Canvas.. 你可以做这样的事情

// HTML
<canvas id="canvas"></canvas>

// Javascript
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext('2d');
var Points = []; //The points are stored in a object array {x,y}

var Redraw = ()=>{
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    Points.forEach((point, index, arr) => {

     // This is what adds the dots on the canvas
     ctx.beginPath();
     ctx.arc(point.x, point.y, 2, 0, 2 * Math.PI);
     ctx.fill();

     if(arr.length > 1){
        if(index == arr.length -1){
          // This connects the last point to the first
          ctx.beginPath();
          ctx.moveTo(point.x, point.y);
          ctx.lineTo(arr[0].x, arr[0].y);
          ctx.stroke();
        }
        else{
          // Connects the current point to the next
          ctx.beginPath();
          ctx.moveTo(point.x, point.y);
          ctx.lineTo(arr[index + 1].x, arr[index + 1].y);
          ctx.stroke();
        }
     }
  });


}

canvas.addEventListener("click", e=> {
    // Every time the canvas is clicked add the point to the Point Array
    // And Redraw it
    Points.push({x: e.clientX, y: e.clientY});

    Redraw();
})

Redraw();

通过使用Canvas Documentation，您应该能够在形状中添加颜色。这可以通过使用LineTo 命令绘制形状的轮廓并填充对象而不是描边来完成，因为那样只会画形状

请注意，在上面的代码中，我选择单独绘制每条线，而不是理想的整个形状，但这样做更容易理解

希望对你有帮助。

- 斯坦纳

---

编辑

因为没有完成代码而感到很遗憾..对不起..

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext('2d');
var Points = [{x:100, y:100}, {x:20, y:200}]

var Update = ()=>{
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  // Draw the shape
  ctx.beginPath();
  Points.forEach((point, index, arr) => {
    if(arr.length > 1){

          if(index == 0) 
             ctx.moveTo(point.x, point.y);

          if(index != arr.length -1) 
             ctx.lineTo(arr[index + 1].x, arr[index + 1].y);

       }
  });
  ctx.fillStyle = "#ddf7f7"; //this is the shapes color
  ctx.closePath();
  ctx.fill();
  ctx.stroke();

  // Draw the dots, this should be done last due to then they are above the path
  ctx.fillStyle = "#000"
  Points.forEach((point, index, arr) => {
     ctx.beginPath();
     ctx.arc(point.x, point.y, 2, 0, 2 * Math.PI);
     ctx.fill();
  });

}

canvas.addEventListener("click", e=> {
    Points.push({x: e.offsetX, y: e.offsetY});
    Update();
})

Update();

在第一版代码中发现错误，我使用了clientX和clientY，应该是offsetX和offseY。

您可能还注意到，在代码的Draw Shape 部分，我没有使用{ 和}，这是因为当您有一个只运行一行代码的 if 语句时，它们是不必要的

Answer 2

你可以这样试试

// if we are in drawing mode
var hasDot = false;

document.addEventListener('mousemove', onMouseMove);

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

document.getElementById('canvas').onclick = function(event) {
    // -10 is for the cursor pointer, but I guess, you need to specify this margin for different OS
    ctx.fillRect(event.clientX - 10,event.clientY - 10,4,4);
    if (!hasDot) {
        // enter the drawing mode
        hasDot = true;
    }
}

function onMouseMove(event) {
    //drawing lines
    if (hasDot) {
        ctx.lineTo(event.clientX - 10, event.clientY - 10);
        ctx.stroke();
    }
}

// don't forget to reset drawing mode somewhere
function reset() {
    hasDot = false;
}

Answer 3

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
        
document.getElementById("dot1").onclick = function(){
  ctx.fillRect(10,10,1,1);
};
document.getElementById("dot2").onclick = function(){
  ctx.fillRect(190,90,1,1);
};
    
document.getElementById("line").onclick = function(){
  ctx.moveTo(10, 10);
  ctx.lineTo(190, 90);
  ctx.stroke();
};

      <canvas id="canvas" width="200" height="100" style="border:1px solid #000000;">
    </canvas>
    <br/>
    <button id="dot1">Dot1</button><button id="dot2">Dot2</button><button  id="line">Line</button>