手画不规则多边形：Canvas 艺术的自由探索

前端

2023-11-02 11:15:41

Canvas 上的自由绘图：手画多边形

在数字艺术的广阔世界中，Canvas 是一块神奇的画布，允许我们挥洒创意，绘制心中所想。今天，我们踏入 Canvas 的领域，探索手画不规则多边形的艺术。

用鼠标绘制多边形的顶点

拿起你的鼠标，就像拿起一支画笔，在 Canvas 上随心所欲地点击。每一点将成为你多边形的顶点，连接起来，形成一个独一无二的形状。

随机生成：拥抱意外的惊喜

厌倦了单调的规则图形？点击随机生成按钮，让算法为你创造一个充满惊喜的多边形。算法巧妙地排列顶点，形成意想不到的形状，激发你的灵感。

回显：探索历史的足迹

回显功能记录了你每一次点击，在画布上留下历史的足迹。观察你的多边形是如何随着时间的推移而演变的，见证每一次修改带来的细微变化。

几何学的奥秘：多边形相交和凹凸性

超越简单的绘制，我们深入探索多边形相交和凹凸性的几何奥秘。

多边形相交：探索重叠的世界

当两条或多条多边形的边相交时，它们就会形成相交的区域。Canvas 实时检测这些相交点，让你了解多边形之间的关系。

凹凸性检测：区分内部和外部

凹凸性检测区分了多边形的内部和外部。凸多边形没有凹陷，而凹多边形有至少一个向内的凹陷。Canvas 智能地识别这些属性，帮助你更深入地理解多边形的结构。

实例代码：揭开 Canvas 的秘密

想要亲身体验绘制不规则多边形的乐趣吗？以下是使用 Canvas 实现该功能的实例代码：

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

let points = [];
let isDrawing = false;

canvas.addEventListener("mousedown", (e) => {
  isDrawing = true;
  points.push({ x: e.clientX, y: e.clientY });
});

canvas.addEventListener("mousemove", (e) => {
  if (!isDrawing) return;
  points.push({ x: e.clientX, y: e.clientY });
});

canvas.addEventListener("mouseup", () => {
  isDrawing = false;
  drawPolygon();
});

function drawPolygon() {
  ctx.beginPath();
  for (let i = 0; i < points.length; i++) {
    ctx.lineTo(points[i].x, points[i].y);
  }
  ctx.closePath();
  ctx.stroke();
}