漸層在設定上很麻煩，要有座標定位、範圍、顏色等，但使用上效果很好，而且可以在同一個圖形中設定一個以上的漸層，變成多重染色的感覺，所以還是滿常被使用在canvas中的。今天會跟大家分享在p5.js製作漸層的方法。

範例圖

先來看看使用漸層可以達成什麼視覺效果。

漸層製作 - 線性漸層

第一個要來進行線性漸層，可以用createLinearGradient這個函數

createLinearGradient(xStart, yStart, xEnd, yEnd)
(xStart, yStart, xEnd, yEnd)
(起始點x,起始點y,結束點x,結束點y)

最主要的步驟只兩個

• 定義好顏色
• 畫形狀

線性漸層詳細製作步驟

詳細撰寫程式步驟中，用drawingContext指向物件，HTML5 Canvas的功能可以用這個API取得，再來使用createLinearGradient這個方法，設定好漸層位置，設定漸層顏色，把完成好的漸層指定回畫面上，畫圖案。使用addColorStop來新增顏色斷點，addColorStop第一個參數可以放置0-1的變量，來設定漸層的位置，第二個參數給定顏色

function setup() {
	createCanvas(800, 800);

  noLoop()
	colorMode(HSB, 360, 100, 100, 100);
	noStroke();
}

function draw() {	

	let g = drawingContext.createLinearGradient(0 , 0, width-200 , height-200); //設定漸層位置
	g.addColorStop(0, color(0, 60, 100));   //設定漸層顏色
	g.addColorStop(1, color(180, 40, 80));  ////設定漸層顏色
	drawingContext.fillStyle = g;    //把完成好的漸層指定回畫面上
	drawingContext.strokeStyle = g;	  //把完成好的漸層指定回畫面上
	rect(0, 0, width, height);   //畫圖案

}

也可以塞多個漸層

用視覺來拆解的話，我把起始位置和結束位置標示出來給大家看一下，就是由底下藍色球的位置開始進行漸層的

漸層製作 - 球形漸層

再來要來介紹球性漸層，使用到的是createRadialGradient這個函數

createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
(起始點x,起始點y, 圓周起始1,結束點x,結束點y,圓周起始2)

也可以簡化步驟為2步(不要想得太困難)

• 定義好顏色
• 畫形狀

球形漸層詳細製作步驟

我們要先設定好兩個球的顏色，以下圖為例，有兩個球形色彩，一個是紫色，一個為藍色，藍色球形本身已經設定偏移至本體的左上角，色彩範圍就是淺藍border框起來的範圍，並使用藍色球形渲染原本話出來的圓型幾何形狀。
步驟與線性的製作流程很類似，設定好漸層位置，設定漸層顏色，把完成好的漸層指定回畫面上，畫圖案，結案!只不過要設定兩個圓的位置稍微繁雜一點而已

球形漸層與線型漸層的交疊使用作範例

多層次應用也可以達成下面這樣的效果喔~~

• 先使用線型漸層由上至下，在使用球型漸層於右上角渲染圖形

• 於背景上色線型漸層，在於幾何圓形中使用球型漸層，我用小點點連成線來標明漸層的渲染路徑

小結

明天會繼續與大家分享漸層的應用與錐狀漸層，謝謝大家~