今天要跟大家分享錐形漸層的畫法，以及把這些落落長的漸層程式碼包裝成好用、可複用fuction

漸層製作 - 錐形漸層

除了上次講到的線性漸層與圓形漸層，還有一種 ConicGradient ，我自己是稱為錐形漸層，是一種變形版的線型漸層，是指定坐標以線型繞著中心點轉一圈，並在路徑周圍創建漸變的效果。

1. createConicGradient(angleStart, xCenter, yCenter)

(angleStart, xCenter, yCenter)
(起始角度,起始x,結束點y)

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

• 定義好顏色
• 畫形狀

錐形漸層詳細製作步驟

步驟與其他漸層的步驟沒有太大的差異，設定好漸層位置，設定漸層顏色，把完成好的漸層指定回畫面上，畫圖案。但有兩點要特別注意的

• 下圖的時作範例中，明明就只有兩個顏色，但在漸層中我們卻需要用到3個addColorStop，這是因為起始點與終點需要使用一樣的顏色才有連續性，我們可以在圖二看到如果只給予兩個addColorStop的成果是什麼樣子

  

  圖二 - 只給予兩個addColorStop，無法變成漂亮的立體錐型
  

• createConicGradient這個函數非常的新，上次查詢到的結果似乎是這兩年才開放的，在使用上要注意一下瀏覽器的支援度

這邊在把程式碼附上給大家

function setup() {
	createCanvas(windowWidth, windowHeight);

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

function draw() {	
	let conic = drawingContext.createConicGradient(180, width/4*2, height/4);
	conic.addColorStop(0, color(310, 100, 100, 100));
	conic.addColorStop('0.5', color(250, 100, 100, 100));
	conic.addColorStop(1, color(310, 100, 100, 100));
	drawingContext.fillStyle = conic;
	drawingContext.strokeStyle = conic;	
	ellipse(width/4*2, height/4, 400, 400);

}

漸層函數，自己包一個好用的function

如前篇和剛剛上面介紹到的，設定漸層要一行一行寫，真心覺得很麻煩，要給位置、顏色什麼的，於是參考了網路上大神們的方式，可以拆成兩個部份來操作，畫顏色的部分獨立成multiColorGradient，其他圖形設定各自成立function

/**
 * 
 * @param {*} xStart 起始點X座標
 * @param {*} yStart 起始點Y座標
 * @param {*} xEnd 結束點X座標
 * @param {*} yEnd 結束點Y座標
 * @param {*} colors 漸層顏色，可多色
 */

 function linearGradients(xStart, yStart, xEnd, yEnd, colors) {
	// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient
	let gradient = drawingContext.createLinearGradient(xStart, yStart, xEnd, yEnd);
	multiColorGradient(gradient, colors)
}





/**水波紋漸層
 * 
 * @param {*} xStart 起始點X座標
 * @param {*} yStart 起始點Y座標
 * @param {*} radiusStart 起始直徑(寬度)，一般設計在正中央 0
 * @param {*} xEnd 結束點X座標
 * @param {*} yEnd 結束點Y座標
 * @param {*} radiusEnd 結束直徑(寬度)，可以想成你的漸層範圍要有多大
 * @param {*} colors 漸層顏色 !!注意，只能兩色漸層，如果傳超過兩個顏色進來，只會取兩個顏色最高值(如:290,340,220,190 ，只會選290和340暈染)
 */
 function radialGradients(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd, colors) {

	let gradient = drawingContext.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd);
	multiColorGradient(gradient, colors)
}



/** 順時鐘漸層
 * 
 * @param {*} angleStart 起始角度
 * @param {*} xCenter 起始點X座標
 * @param {*} yCenter 起始點Y座標
 * @param {*} colors 漸層顏色，可多色
 */

function conicGradient(angleStart, xCenter, yCenter, colors) {

	let gradient = drawingContext.createConicGradient(angleStart, xCenter, yCenter);
	multiColorGradient(gradient, colors)
}


/**
 * 
 * @param {*} gradient 物件
 * @param {*} colors 顏色
 */

function multiColorGradient(gradient, colors) {
	for (let i = 0; i < colors.length; i++) {
		let mapFlag = map(i, 0, colors.length-1, 0, 1); //整理成 0 ~ 1之間
    // console.log(mapFlag)
		gradient.addColorStop(mapFlag.toString(), colors[i]); //0 0.5 1 (小數點要轉字串)
	}
	drawingContext.fillStyle = gradient;
	drawingContext.strokeStyle = gradient;	
}

小結

漸層的部分就到這邊結束，下一篇我們會試著操作其它讓繪圖更立體的部分喔