canvas 鼠标移动画多边形拐点

要在Canvas上实现鼠标移动时画多边形的拐点，可以按照以下步骤进行操作：

创建一个Canvas元素，并获取到对应的上下文对象，例如：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

定义一个变量来存储多边形的顶点数组：

let vertices = [];

监听Canvas的鼠标移动事件，将鼠标的坐标添加到顶点数组中：

canvas.addEventListener('mousemove', (e) => {
  const rect = canvas.getBoundingClientRect();
  const mouseX = e.clientX - rect.left;
  const mouseY = e.clientY - rect.top;
  vertices.push({ x: mouseX, y: mouseY });
});

使用ctx.beginPath()方法开始绘制多边形，并根据顶点数组的内容连接每个点：

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(vertices[0].x, vertices[0].y);
for (let i = 1; i < vertices.length; i++) {
  ctx.lineTo(vertices[i].x, vertices[i].y);
}
ctx.closePath();
ctx.stroke();

在鼠标移动事件的处理程序中，每次绘制多边形之前先清除Canvas上的内容，然后再绘制。

这样，当鼠标移动时，Canvas上会实时绘制出多边形的拐点