点赞 + 关注 + 收藏 = 学会了
如果你刚接触 p5.js，想画一个三角形，那 triangle() 这个 API 就是你的好帮手！
triangle () 是什么？
triangle() 是 p5.js 里专门用来画三角形的函数。只要你告诉它三个点的位置，它就能自动把这三个点连起来，形成一个三角形。
基本用法：语法和参数
画三角形的语法超级简单：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="js" cid="n159" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;">triangle(x1, y1, x2, y2, x3, y3)</pre>
这里的 6 个参数其实是三个点的坐标：
(x1, y1)：第一个点的位置(x2, y2)：第二个点的位置(x3, y3)：第三个点的位置
注意：p5.js 的坐标系里，左上角是原点 (0,0)，向右 x 变大，向下 y 变大（和我们数学课本里的坐标系有点不一样哦）。
一个简单的三角形
先来画个最基础的三角形试试手，代码如下（可以直接复制到 p5.js Web Editor 运行）：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="js" cid="n172" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;">function setup() {
createCanvas(400, 400); // 创建一个 400x400 的画布
}
function draw() {
background(220); // 灰色背景
// 画三角形：三个点分别是 (100,50)、(50,150)、(150,150)
triangle(100, 50, 50, 150, 150, 150);
}</pre>
画布上会出现一个等腰三角形，顶点在上方 (100,50)，底边两端在 (50,150) 和 (150,150)。
给三角形加颜色和边框
我们可以用 fill() 给三角形填充颜色，用 stroke() 改边框颜色，用 strokeWeight() 调边框粗细。
左边是纯红色三角形，右边是蓝色边框的空心三角形。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="js" cid="n178" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;">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);
}</pre>
会跟着鼠标跑的彩色三角形
最后来个好玩的！让三角形跟着鼠标移动，而且颜色会随鼠标位置变化～
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="js" cid="n182" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;">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);
}</pre>
移动鼠标时，三角形会跟着跑，而且左边是红色，右边是绿色，中间是渐变的黄色～
以上就是本文的全部内容啦，想了解更多 P5.js 用法欢迎关注 《P5.js中文教程》。
也可以➕我 green bubble 吹吹水咯
点赞 + 关注 + 收藏 = 学会了
