一、Canvas 画布基础与端点操作的意义

Canvas 是 HTML5 提供的强大绘图 API，允许开发者通过 JavaScript 动态生成和操作图形。相较于 SVG 等矢量图形方案，Canvas 的优势在于其基于像素的渲染机制，能够高效处理复杂图形和动画。在 Canvas 中，图形由一系列端点（如线段起点/终点、多边形顶点）定义，修改这些端点的位置是实现图形动态调整（如拖拽、变形、动画）的核心操作。

例如，在绘制一个多边形时，每个顶点的坐标决定了图形的形状；若需实现用户拖拽顶点调整多边形形态的功能，就必须精准修改这些端点的坐标。这种能力在数据可视化、游戏开发、图形编辑工具等领域具有广泛应用价值。

二、Canvas 坐标系与端点定位原理

Canvas 使用二维笛卡尔坐标系，原点（0,0）位于画布左上角，X 轴向右为正方向，Y 轴向下为正方向。所有图形的绘制均基于该坐标系，端点的位置通过（x, y）坐标对定义。

1. 基础图形端点分析

   • 线段：由起点（x1, y1）和终点（x2, y2）定义，修改任一端点坐标即可改变线段方向或长度。
   • 矩形：通过左上角坐标（x, y）和宽度（width）、高度（height）定义，但若需倾斜或变形矩形，需将其转换为由四个顶点（端点）组成的多边形。
   • 多边形/路径：由一系列顶点坐标（如 [x1,y1, x2,y2, …, xn,yn]）通过 lineTo() 或 moveTo() 方法连接而成，每个顶点均为可修改的端点。

2. 坐标转换与计算
   修改端点位置时，需考虑坐标系的相对性。例如，若需将图形向右平移 50 像素，需对所有端点的 x 坐标增加 50；若需以中心点为基准缩放图形，则需先计算中心点坐标，再按比例调整各端点到中心点的距离。

三、修改端点位置的核心方法

1. 直接重绘图形

最简单的方式是清除画布并重新绘制修改后的图形。例如，修改线段端点后重新调用 beginPath()、moveTo()、lineTo() 和 stroke() 方法：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x1 = 50, y1 = 50, x2 = 150, y2 = 150; // 初始端点
function drawLine() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}
// 修改端点坐标并重绘
function updateEndpoint(newX2, newY2) {
  x2 = newX2;
  y2 = newY2;
  drawLine();
}
updateEndpoint(200, 100); // 将终点修改为 (200, 100)

2. 使用变换矩阵（Transform）

Canvas 的 transform()、rotate()、scale() 和 translate() 方法可对整个坐标系进行变换，间接修改端点位置。例如，将图形旋转 45 度：

ctx.save(); // 保存当前状态
ctx.translate(100, 100); // 将原点移至图形中心
ctx.rotate(45 * Math.PI / 180); // 旋转 45 度
ctx.beginPath();
ctx.rect(-25, -25, 50, 50); // 绘制旋转后的矩形（端点已变换）
ctx.fill();
ctx.restore(); // 恢复状态

此方法适用于批量修改端点，但需注意变换的累积效应。

3. 动态路径更新

对于复杂路径（如多边形），可通过数组存储顶点坐标，修改数组后重新绘制路径：

let polygonVertices = [50, 50, 150, 50, 150, 150, 50, 150]; // 四边形顶点
function drawPolygon() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(polygonVertices[0], polygonVertices[1]);
  for (let i = 2; i < polygonVertices.length; i += 2) {
    ctx.lineTo(polygonVertices[i], polygonVertices[i + 1]);
  }
  ctx.closePath();
  ctx.stroke();
}
// 修改第三个顶点坐标
function updateVertex(index, newX, newY) {
  polygonVertices[index * 2] = newX;
  polygonVertices[index * 2 + 1] = newY;
  drawPolygon();
}
updateVertex(2, 100, 100); // 将第三个顶点改为 (100, 100)

四、实践案例：交互式图形编辑

以下是一个完整的交互式案例，允许用户拖拽多边形顶点：

<canvas id="editableCanvas" width="400" height="400"></canvas>
<script>
  const canvas = document.getElementById('editableCanvas');
  const ctx = canvas.getContext('2d');
  let vertices = [100, 100, 200, 100, 200, 200, 100, 200]; // 初始四边形
  let selectedVertex = null;
  function drawPolygon() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(vertices[0], vertices[1]);
    for (let i = 2; i < vertices.length; i += 2) {
      ctx.lineTo(vertices[i], vertices[i + 1]);
    }
    ctx.closePath();
    ctx.strokeStyle = 'blue';
    ctx.stroke();
    // 绘制顶点标记
    ctx.fillStyle = 'red';
    for (let i = 0; i < vertices.length; i += 2) {
      ctx.beginPath();
      ctx.arc(vertices[i], vertices[i + 1], 5, 0, Math.PI * 2);
      ctx.fill();
    }
  }
  canvas.addEventListener('mousedown', (e) => {
    const rect = canvas.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;
    // 检测是否点击了顶点
    for (let i = 0; i < vertices.length; i += 2) {
      const dx = mouseX - vertices[i];
      const dy = mouseY - vertices[i + 1];
      if (Math.sqrt(dx * dx + dy * dy) < 10) {
        selectedVertex = i / 2;
        break;
      }
    }
  });
  canvas.addEventListener('mousemove', (e) => {
    if (selectedVertex !== null) {
      const rect = canvas.getBoundingClientRect();
      vertices[selectedVertex * 2] = e.clientX - rect.left;
      vertices[selectedVertex * 2 + 1] = e.clientY - rect.top;
      drawPolygon();
    }
  });
  canvas.addEventListener('mouseup', () => {
    selectedVertex = null;
  });
  drawPolygon();
</script>

此案例中，用户点击红色顶点可拖拽调整位置，实时更新多边形形态。

五、性能优化与注意事项

1. 减少重绘区域：使用 clearRect() 仅清除需要更新的区域，而非整个画布。
2. 离屏渲染：对于复杂图形，可先在隐藏的 Canvas 中绘制，再通过 drawImage() 复制到主画布。
3. 坐标精度：浮点数坐标可能导致抗锯齿问题，必要时可对坐标取整。
4. 事件处理：顶点检测需考虑画布缩放或设备像素比（window.devicePixelRatio）。

六、总结与扩展

修改 Canvas 图形端点位置是实现交互式绘图的核心技术。通过直接重绘、变换矩阵或动态路径更新，可灵活控制图形形态。结合事件监听，可进一步开发拖拽、变形、动画等高级功能。未来可探索 WebGL 与 Canvas 的结合，以实现更高效的 3D 图形端点操作。