p5.js 三角形triangle的用法

德育处主任

发布于 2026-06-20 08:13:54

170

文章被收录于专栏：前端数据可视化前端数据可视化

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

如果你刚接触 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中文教程》。

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-07-29，如有侵权请联系 cloudcommunity@tencent.com 删除

基础