本文簡介
p5.js 作為一款藝術(shù)類的 canvas 庫，對顏色方面的支持是挺下功夫的，比如本文要介紹的漸變方法。
lerpColor()
要實(shí)現(xiàn)漸變效果，可以使用 lerpColor() 方法。
lerpColor 的作用是混合兩個(gè)顏色以找到一個(gè)介于它們之間的顏色。
語法是這樣的：
lerpColor(c1, c2, amt)
-
c1: 開始顏色 -
c2: 結(jié)束顏色 -
amt: 介于0和1的數(shù)字
舉個(gè)例子，我想取出紅色和藍(lán)色中間的那個(gè)過渡顏色的值，可以這樣寫
function setup() {
createCanvas(300, 300)
noStroke()
const red = color(255, 0, 0)
const blue = color(0, 0, 255)
const interim = lerpColor(red, blue, 0.5)
fill(red)
rect(10, 10, 30, 60)
fill(interim)
rect(40, 10, 30, 60)
fill(blue)
rect(70, 10, 30, 60)
console.log(interim)
}
在這個(gè)例子中，我使用紅色和藍(lán)色作為基礎(chǔ)色，使用 lerpColor() 方法獲取這兩個(gè)色的中間值，最終出來的效果是紫色。
我分別將這3個(gè)顏色填充到3個(gè)矩形里。
最后我在控制臺輸出這個(gè)過渡顏色：
線性漸變 1
基于上面這個(gè)特性，如果我們把矩形的數(shù)量增多，把矩形的寬度變小就能實(shí)現(xiàn)線性漸變的效果。
和前一個(gè)例子一樣，從紅色漸變到藍(lán)色。我分20個(gè)方塊慢慢漸變過去。
function setup() {
createCanvas(400, 400)
noStroke()
// 創(chuàng)建漸變顏色
let red = color(255, 0, 0) // 起始顏色（紅色）
let blue = color(0, 0, 255) // 終止顏色（藍(lán)色）
// 在矩形中應(yīng)用漸變填充
for (let i = 0; i < 20; i++) {
let amt = i / 20 // 計(jì)算漸變百分比
let c = lerpColor(red, blue, amt) // 計(jì)算漸變顏色
fill(c)
rect(i * 20, 0, 20, height)
}
}
通過 for 循環(huán)20次，每次生成一個(gè) 20 * 400 的矩形，根據(jù)循環(huán)時(shí)的 i 值計(jì)算每個(gè)矩形應(yīng)該出現(xiàn)的位置 rect(i * 20, 0, 20, height)。
最最重要的是 amt ，每次循環(huán)都會計(jì)算本次循環(huán)生成的矩形的漸變顏色。可以自己在控制臺輸出 amt 。
如果理解了這個(gè)例子，我們再試試把每個(gè)矩形的寬度設(shè)為1，創(chuàng)建400個(gè)矩形實(shí)現(xiàn)漸變。
function setup() {
createCanvas(400, 400)
noStroke()
// 創(chuàng)建漸變顏色
let c1 = color(255, 0, 0) // 起始顏色（紅色）
let c2 = color(0, 0, 255) // 終止顏色（藍(lán)色）
// 在矩形中應(yīng)用漸變填充
for (let i = 0; i < width; i++) {
let amt = map(i, 0, width - 1, 0, 1) // 計(jì)算漸變百分比
let c = lerpColor(c1, c2, amt) // 計(jì)算漸變顏色
fill(c)
rect(i, 0, 1, height)
}
}
這次看上去就更加絲滑了，工友們可以自己在控制臺輸出 amt ，看看每次循環(huán)時(shí)漸變百分比的變化。
線性漸變2
上面的漸變方法看上去有點(diǎn)笨拙，按照上面的邏輯我們?nèi)绻獡Q個(gè)漸變角度，實(shí)現(xiàn)起來就更加困難了。
canvas 本身是支持漸變的，我在《Canvas 從進(jìn)階到退學(xué)》里有提到過。
p5.js 作為一款 canvas 庫，很自覺的提供了 drawingContext 給開發(fā)者訪問 canvas 上下文。
我們就可以通過這個(gè)方法去實(shí)現(xiàn)漸變。
比如我想讓紅藍(lán)漸變從左上角往右下角過渡，可以這么寫：
function setup() {
createCanvas(400, 400)
noStroke()
// 創(chuàng)建線性漸變
let gradient = drawingContext.createLinearGradient(
0, 0, width, height // 漸變起始和終止坐標(biāo)
)
gradient.addColorStop(0, 'red') // 漸變起始顏色
gradient.addColorStop(1, 'blue') // 漸變終止顏色
// 應(yīng)用線性漸變填充
drawingContext.fillStyle = gradient
rect(0, 0, width, height)
}
這屬于 canvas 的基礎(chǔ)知識，還不太了解的工友可以查閱 《Canvas 從進(jìn)階到退學(xué)》漸變章節(jié)。
徑向漸變
要實(shí)現(xiàn)徑向漸變，我們也同樣用回前面說的『線性漸變2』的方法。
function setup() {
createCanvas(400, 400)
noStroke()
// 創(chuàng)建徑向漸變
let gradient = drawingContext.createRadialGradient(
width / 2, height / 2, 50, // 漸變中心坐標(biāo)
width / 2, height / 2, 200 // 漸變半徑
)
gradient.addColorStop(0, 'red') // 漸變起始顏色
gradient.addColorStop(1, 'blue') // 漸變終止顏色
// 應(yīng)用徑向漸變填充
drawingContext.fillStyle = gradient
rect(0, 0, width, height)
}
這個(gè)同樣是 canvas 的基礎(chǔ)知識。
上面的代碼用到 width 和 height 是 p5.js 提供的變量，這是畫布的寬度和高度的意思。
小題目
在 《Canvas 從進(jìn)階到退學(xué)》 里提到 canvas 可以設(shè)置描邊漸變，那在 p5.js 里應(yīng)該如何實(shí)現(xiàn)描邊漸變呢？
推薦閱讀
??《p5.js 開發(fā)點(diǎn)彩畫派的繪畫工具》
??《p5.js畫布操作實(shí)戰(zhàn)：創(chuàng)建，綁定指定元素，動態(tài)調(diào)整大小，隱藏滾動條，刪除畫布》
點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會了
代碼倉庫
