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

Question

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

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>

如何用 canvas 做到这一点？！将不胜感激 <3

Answer 1

您可以检测鼠标在canvas上的位置并画一条线到坐标。要获得鼠标的 canvas x 和 y，您必须进行一些计算，因为站点坐标与 canvas 有点不同。
更详细的描述在这里：

只有当 canvas 足够大，从逻辑上讲，这才有效...

希望这对您有所帮助：

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>

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

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?

html

javascript

canvas

html5-canvas