使用JavaScript线性连接Canvas画布上随机点的实现方法

核心缺失逻辑 #

你当前的代码存在两个关键问题，导致无法实现顺序连线效果：

• 生成随机点时没有按生成顺序存储点位坐标，画完点就丢弃了x、y值，后续连线时没有可参考的点位顺序数据
• 不了解Canvas连续路径的绘制规则：连续折线需要先定位到起点，再依次向后续点位绘制线段，最后统一描边，你现在的点击事件里只有路径初始化和描边，没有实际的点位连接逻辑

具体实现代码 #

首先修正原有代码的问题，新增点位存储逻辑，补全连线逻辑即可：

HTML部分 #

注意canvas标签的width、height属性是画布像素尺寸，不要写百分比，否则会出现渲染尺寸异常：

<canvas id="showCanvas" width="600" height="400" style="border:2px solid #000000;">
  Your browser does not support the canvas element
</canvas>
<button class="drawLines">连接点位</button>

JS部分 #

var myCanvas = document.getElementById("showCanvas");
var myContext = myCanvas.getContext("2d");
// 按生成顺序存储所有随机点的坐标
const pointList = [];
randomPoints(myContext, 4);

function randomPoints(ctx, count) {
  // 每次生成新点前清空旧的点位数据
  pointList.length = 0;
  for (var i = 0; i < count; i++) {
    var x = Math.floor(Math.random() * 600);
    var y = Math.floor(Math.random() * 400);
    // 存储当前点坐标
    pointList.push({x, y});
    // 绘制圆点，每次画圆单独开路径避免后续描边给圆加边框
    ctx.beginPath();
    var r = 5;
    ctx.arc(x, y, r, 0, 2 * Math.PI, true);
    ctx.closePath();
    ctx.fill();
  }
}

$('.drawLines').click(function() {
  if (pointList.length < 2) return;
  myContext.beginPath();
  // 定位到第一个点作为折线起点
  myContext.moveTo(pointList[0].x, pointList[0].y);
  // 按存储顺序依次连接后续点位
  for (let i = 1; i < pointList.length; i++) {
    myContext.lineTo(pointList[i].x, pointList[i].y);
  }
  // 可自定义线条样式
  myContext.strokeStyle = '#f00';
  myContext.lineWidth = 2;
  myContext.stroke();
});

效果说明 #

运行代码后会先生成4个随机分布的黑色圆点，点击「连接点位」按钮，就会按照点的生成顺序，用红色折线把所有点串联成单条连续线条，不会出现单点向所有点辐射连线的问题。

补充提示：如果需要重新生成点再连线，在清空画布后重新调用randomPoints方法即可，新的点位会自动覆盖存在pointList数组里的旧数据。

内容的提问来源于stack exchange，提问作者MotseMo