我们如何做到这一点，以便在单击屏幕时，画布从一个顶点到单击位置创建一条线？答案

【问题标题】：How can we do this so that when the screen is clicked, a line is created by a canvas from one vertex to the clicked location?我们如何做到这一点，以便在单击屏幕时，画布从一个顶点到单击位置创建一条线？
【发布时间】：2022-01-24 00:26:09
【问题描述】：

我在这里创建了一个圆圈，这样当点击屏幕时，圆圈就会移动到那里。而且我还有一个固定点（顶点），我希望这两个点作为一条线的起点和终点。

const coordinates = document.querySelector(".coordinates");
const circle = document.querySelector(".circle");
const result = document.querySelector(".result");
const numbers = document.querySelectorAll("p");
coordinates.addEventListener("click", e => {
    circle.style.setProperty('--x', `${e.clientX}px`);
    circle.style.setProperty('--y', `${e.clientY}px`);
})

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(50,100);
ctx.stroke();

canvas {
    color: rgb(255, 255, 255);
}
.circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: fixed;
    --x: 47px;
    left: calc(var(--x) - 10px);
    --y: 47px;
    top: calc(var(--y) - 10px);
    background-color: white;
    
}
.bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #24232e;
}
.coordinates {
    height: 100%; 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


<body>
    <div class="bg">
        <div class="coordinates">
          <canvas id="myCanvas" width="200" height="100" style=""></canvas>
        </div>
    </div>
    <div class="circle">
    </div>
</body>


</html>

如何用画布做到这一点？！会很感激

【问题讨论】：

标签： javascript html canvas html5-canvas

【解决方案1】：

您可以检测画布上的鼠标位置并绘制一条线到坐标。要获得鼠标的画布 x 和 y，您必须进行一些计算，因为站点坐标与画布坐标有些不同。
更详细的描述在这里：https://stackoverflow.com/a/17130415/14076532

这只有在画布足够大的情况下才有效，逻辑上...

希望这会有所帮助：

const coordinates = document.querySelector(".coordinates");
const circle = document.querySelector(".circle");
const result = document.querySelector(".result");
const numbers = document.querySelectorAll("p");
coordinates.addEventListener("click", e => {
    clicked(e);
    circle.style.setProperty('--x', `${e.clientX}px`);
    circle.style.setProperty('--y', `${e.clientY}px`);
})

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#de7270"; // change your color here NOTE: this will remain until you change it
ctx.moveTo(0,0);
ctx.lineTo(50,100);
ctx.stroke();

function clicked(event) {
  ctx.save(); // some canvas-safety-stuff
  ctx.beginPath();
  
  let mousepos = getMousePos(event); // get the mouse position in "canvas-cooridnates"
  
  ctx.clearRect(0,0, c.width, c.height) // erease the canvas
  ctx.moveTo(0, 0);
  ctx.lineTo(mousepos.x, mousepos.y); // draw the line to the mouse
 
  ctx.closePath(); 
  ctx.stroke(); // closing of the canvas-safety-stuff
  ctx.restore();
}

function getMousePos (evt) {
      var rect = c.getBoundingClientRect(), // abs. size of element
          scaleX = c.width / c.width,    // relationship bitmap vs. element for X
          scaleY = c.height / rect.height;  // relationship bitmap vs. element for Y

      return {
        x: (evt.clientX - rect.left) * scaleX,   // scale mouse coordinates after they have
        y: (evt.clientY - rect.top) * scaleY     // been adjusted to be relative to element
      }
    }

canvas {
    color: rgb(255, 255, 255);
}
.circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: fixed;
    --x: 47px;
    left: calc(var(--x) - 10px);
    --y: 47px;
    top: calc(var(--y) - 10px);
    background-color: white;
    
}
.bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #24232e;
}
.coordinates {
    height: 100%; 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


<body>
    <div class="bg">
        <div class="coordinates">
          <canvas id="myCanvas" width="200" height="100" style=""></canvas>
        </div>
    </div>
    <div class="circle">
    </div>
</body>


</html>

【讨论】：

非常感谢，但我应该怎么做才能只有一行？我的意思是第二次点击后，第一行消失了？我应该如何改变线条的颜色？
所以你可以使用ctx.clearrect(0,0, c.width, c.height)删除整个画布在绘制线条之前调用这个...你可以使用ctx.strokeStyle = "<color>"改变线条的颜色调用这个，在上下文变量启动后...应该工作:)