p5.js 三角形triangle的用法

点赞 + 关注 + 收藏 = 学会了

如果你刚接触 p5.js，想画一个三角形，那 triangle() 这个 API 就是你的好帮手！

triangle () 是什么？

triangle() 是 p5.js 里专门用来画三角形的函数。只要你告诉它三个点的位置，它就能自动把这三个点连起来，形成一个三角形。

基本用法：语法和参数

画三角形的语法超级简单：

triangle(x1, y1, x2, y2, x3, y3)

这里的 6 个参数其实是三个点的坐标：

• (x1, y1)：第一个点的位置
• (x2, y2)：第二个点的位置
• (x3, y3)：第三个点的位置

注意：p5.js 的坐标系里，左上角是原点 (0,0)，向右 x 变大，向下 y 变大（和我们数学课本里的坐标系有点不一样哦）。

一个简单的三角形

先来画个最基础的三角形试试手，代码如下（可以直接复制到 p5.js Web Editor 运行）：

function setup() { createCanvas(400, 400); // 创建一个 400x400 的画布 } function draw() { background(220); // 灰色背景 // 画三角形：三个点分别是 (100,50)、(50,150)、(150,150) triangle(100, 50, 50, 150, 150, 150); }

画布上会出现一个等腰三角形，顶点在上方 (100,50)，底边两端在 (50,150) 和 (150,150)。

给三角形加颜色和边框

我们可以用 fill() 给三角形填充颜色，用 stroke() 改边框颜色，用 strokeWeight() 调边框粗细。

左边是纯红色三角形，右边是蓝色边框的空心三角形。

function setup() { createCanvas(400, 400); } function draw() { background(255); // 白色背景 // 红色填充、无边框的三角形 fill(255, 0, 0); // 红色（RGB值） noStroke(); // 取消边框 triangle(50, 50, 50, 150, 150, 100); // 蓝色边框、无填充的三角形 noFill(); // 取消填充 stroke(0, 0, 255); // 蓝色边框 strokeWeight(3); // 边框粗3像素 triangle(200, 50, 150, 150, 250, 150); }

会跟着鼠标跑的彩色三角形

最后来个好玩的！让三角形跟着鼠标移动，而且颜色会随鼠标位置变化～

function setup() { createCanvas(600, 400); // 更大的画布 } function draw() { background(0); // 黑色背景，每次刷新清空画面 // 获取鼠标当前位置 let mouseXPos = mouseX; let mouseYPos = mouseY; // 定义三角形的三个点（围绕鼠标位置） let topX = mouseXPos; // 顶点x（鼠标x） let topY = mouseYPos - 60; // 顶点y（鼠标上方60像素） let leftX = mouseXPos - 50; // 左下x（鼠标左方50像素） let leftY = mouseYPos + 50; // 左下y（鼠标下方50像素） let rightX = mouseXPos + 50; // 右下x（鼠标右方50像素） let rightY = mouseYPos + 50; // 右下y（鼠标下方50像素） // 颜色随鼠标x坐标变化（从红到绿） let colorValue = map(mouseXPos, 0, width, 0, 255); fill(colorValue, 255 - colorValue, 100); // 红→绿渐变 // 画三角形 triangle(topX, topY, leftX, leftY, rightX, rightY); }

移动鼠标时，三角形会跟着跑，而且左边是红色，右边是绿色，中间是渐变的黄色～

---

以上就是本文的全部内容啦，想了解更多 P5.js 用法欢迎关注 《P5.js中文教程》。

也可以➕我 green bubble 吹吹水咯

点赞 + 关注 + 收藏 = 学会了

本作品采用《CC 协议》，转载必须注明作者和本文链接