用Canvas打造多边形：我的编程实践之旅

2024-01-06 10:20:51

Canvas多边形的绘制之旅

作为一名初出茅庐的编程爱好者，我最近踏上了绘制多边形的征途。随着我对Canvas的深入探索，我意识到面向对象编程的强大力量。

起点：创建画板

绘制多边形的起点是创建画板。这是图形绘制的基础，就像画家手中的画布。在JavaScript中，可以使用如下代码创建画板：

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

绘制多边形：逐步连线

绘制多边形的关键在于一步步连线。每次点击鼠标，就创建一个新的点，并将它与上一个点连接起来。这就像在现实世界中用铅笔画画一样，一步一步地勾勒出形状。

为了实现这一点，我们可以在点击画板时使用事件侦听器：

canvas.addEventListener('click', (e) => {
  // 获取点击坐标
  const x = e.clientX;
  const y = e.clientY;

  // 创建新点
  const point = { x, y };

  // 将新点添加到点数组
  points.push(point);

  // 绘制新线段
  if (points.length > 1) {
    ctx.beginPath();
    ctx.moveTo(points[points.length - 2].x, points[points.length - 2].y);
    ctx.lineTo(point.x, point.y);
    ctx.stroke();
  }
});

闭合图形：完成多边形

在绘制完多边形的所有边后，我们需要闭合图形。为此，可以在点击“完成”按钮时使用另一个事件侦听器：

const completeButton = document.getElementById('complete-button');
completeButton.addEventListener('click', () => {
  // 闭合图形
  ctx.closePath();

  // 填充图形（可选）
  ctx.fillStyle = 'lightblue';
  ctx.fill();
});

面向对象编程：代码的可读性和可维护性

在绘制多边形的过程中，我发现面向对象编程带来的巨大好处。通过将代码组织成对象和类，我可以将复杂的功能分解为更小的、易于管理的模块。

例如，我创建了一个Polygon类来管理多边形的点和线段：

class Polygon {
  constructor() {
    this.points = [];
  }

  addPoint(point) {
    this.points.push(point);
  }

  draw(ctx) {
    for (let i = 0; i < this.points.length - 1; i++) {
      ctx.beginPath();
      ctx.moveTo(this.points[i].x, this.points[i].y);
      ctx.lineTo(this.points[i + 1].x, this.points[i + 1].y);
      ctx.stroke();
    }
  }
}