P5.js 形状完整介绍

P5.js是一个用于创造艺术、设计、数据可视化和游戏等交互式图形的JavaScript库。它的核心是绘图API，通过这个API，我们可以轻松地创建各种形状，如直线、圆形、矩形、三角形和多边形等。

直线(line)

直线是最简单的形状之一，可以通过line()函数来绘制。这个函数需要四个参数，依次为起点的x坐标，起点的y坐标，终点的x坐标，终点的y坐标。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  stroke(255, 0, 0); // 红色
  strokeWeight(4); // 粗度为4个像素
  line(50, 50, 350, 350); // 绘制一条直线
}

圆形(circle)

圆形也是一种基本形状，可以通过ellipse()函数绘制。这个函数需要四个参数，依次为椭圆中心的x坐标，椭圆中心的y坐标，椭圆的宽度和高度。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  noFill(); // 不填充颜色
  stroke(255, 0, 0); // 红色
  strokeWeight(4); // 粗度为4个像素
  ellipse(200, 200, 200, 200); // 绘制一个圆形
}

矩形(rect)

矩形也是一种基本形状，可以通过rect()函数绘制。这个函数需要四个参数，依次为矩形左上角的x坐标，矩形左上角的y坐标，矩形的宽度和高度。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  noFill(); // 不填充颜色
  stroke(255, 0, 0); // 红色
  strokeWeight(4); // 粗度为4个像素
  rect(100, 100, 200, 200); // 绘制一个矩形
}

三角形(triangle)

三角形也是一种基本形状，可以通过triangle()函数绘制。这个函数需要6个参数，依次为三角形的三个顶点的x坐标和y坐标。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  noFill(); // 不填充颜色
  stroke(255, 0, 0); // 红色
  strokeWeight(4); // 粗度为4个像素
  triangle(100, 100, 200, 200, 300, 100); // 绘制一个三角形
}

多边形(polygons)

多边形可以通过beginShape()和endShape()函数来绘制。多边形的顶点可以通过vertex()函数来添加，这个函数需要两个参数，依次为顶点的x坐标和y坐标。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  noFill(); // 不填充颜色
  stroke(255, 0, 0); // 红色
  strokeWeight(4); // 粗度为4个像素
  beginShape(); // 开始绘制多边形
  vertex(100, 100); // 添加第一个顶点
  vertex(150, 50); // 添加第二个顶点
  vertex(200, 100); // 添加第三个顶点
  vertex(200, 200); // 添加第四个顶点
  vertex(100, 200); // 添加第五个顶点
  endShape(CLOSE); // 结束绘制多边形
}

以上是P5.js常见形状的完整介绍，通过这些形状的绘制，我们可以轻松地创造出各种有趣的效果和交互式图形。