點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了
如果你剛接觸 p5.js，想畫一個(gè)三角形，那 triangle() 這個(gè) API 就是你的好幫手！
triangle () 是什么？
triangle() 是 p5.js 里專門用來畫三角形的函數(shù)。只要你告訴它三個(gè)點(diǎn)的位置，它就能自動(dòng)把這三個(gè)點(diǎn)連起來，形成一個(gè)三角形。
基本用法：語法和參數(shù)
畫三角形的語法超級(jí)簡單：
<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 個(gè)參數(shù)其實(shí)是三個(gè)點(diǎn)的坐標(biāo)：
(x1, y1)：第一個(gè)點(diǎn)的位置(x2, y2)：第二個(gè)點(diǎn)的位置(x3, y3)：第三個(gè)點(diǎn)的位置
注意：p5.js 的坐標(biāo)系里，左上角是原點(diǎn) (0,0)，向右 x 變大，向下 y 變大（和我們數(shù)學(xué)課本里的坐標(biāo)系有點(diǎn)不一樣哦）。
一個(gè)簡單的三角形
先來畫個(gè)最基礎(chǔ)的三角形試試手，代碼如下（可以直接復(fù)制到 p5.js Web Editor 運(yùn)行）：
<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); // 創(chuàng)建一個(gè) 400x400 的畫布
}
function draw() {
background(220); // 灰色背景
// 畫三角形：三個(gè)點(diǎn)分別是 (100,50)、(50,150)、(150,150)
triangle(100, 50, 50, 150, 150, 150);
}</pre>
畫布上會(huì)出現(xiàn)一個(gè)等腰三角形，頂點(diǎn)在上方 (100,50)，底邊兩端在 (50,150) 和 (150,150)。
給三角形加顏色和邊框
我們可以用 fill() 給三角形填充顏色，用 stroke() 改邊框顏色，用 strokeWeight() 調(diào)邊框粗細(xì)。
左邊是純紅色三角形，右邊是藍(lán)色邊框的空心三角形。
<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);
// 藍(lán)色邊框、無填充的三角形
noFill(); // 取消填充
stroke(0, 0, 255); // 藍(lán)色邊框
strokeWeight(3); // 邊框粗3像素
triangle(200, 50, 150, 150, 250, 150);
}</pre>
會(huì)跟著鼠標(biāo)跑的彩色三角形
最后來個(gè)好玩的！讓三角形跟著鼠標(biāo)移動(dòng)，而且顏色會(huì)隨鼠標(biāo)位置變化～
<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); // 黑色背景，每次刷新清空畫面
// 獲取鼠標(biāo)當(dāng)前位置
let mouseXPos = mouseX;
let mouseYPos = mouseY;
// 定義三角形的三個(gè)點(diǎn)（圍繞鼠標(biāo)位置）
let topX = mouseXPos; // 頂點(diǎn)x（鼠標(biāo)x）
let topY = mouseYPos - 60; // 頂點(diǎn)y（鼠標(biāo)上方60像素）
let leftX = mouseXPos - 50; // 左下x（鼠標(biāo)左方50像素）
let leftY = mouseYPos + 50; // 左下y（鼠標(biāo)下方50像素）
let rightX = mouseXPos + 50; // 右下x（鼠標(biāo)右方50像素）
let rightY = mouseYPos + 50; // 右下y（鼠標(biāo)下方50像素）
// 顏色隨鼠標(biāo)x坐標(biāo)變化（從紅到綠）
let colorValue = map(mouseXPos, 0, width, 0, 255);
fill(colorValue, 255 - colorValue, 100); // 紅→綠漸變
// 畫三角形
triangle(topX, topY, leftX, leftY, rightX, rightY);
}</pre>
移動(dòng)鼠標(biāo)時(shí)，三角形會(huì)跟著跑，而且左邊是紅色，右邊是綠色，中間是漸變的黃色～
以上就是本文的全部內(nèi)容啦，想了解更多 P5.js 用法歡迎關(guān)注 《P5.js中文教程》。
也可以?我 green bubble 吹吹水咯
點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了
