当前位置：首页 > ops >正文

p5.js 三角形triangle的用法

ops 2025/8/1 13:25:03

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

如果你刚接触 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);
}