差不多也把混和效果和圖像、文字的操作都講完了，這篇會來小總結一下這幾篇可以製作出來的內容，可以先來看一下製作出來的成果(雖然醜醜的)

步驟

步驟上大至可以分成

• 引入文字與圖片
• 設定好線條寬度與使用字形
• 放置全版圖片作為底圖
• 畫渲染的背景
• 設定文字發光的效果
• 輸入文字與文字位置
• 放置裝飾用的雲霧

push & pop

這邊有用到一組比較特別的語法push & pop，可以鎖定混和效果或者像是位置設定等等，只會出現在這兩個函數之間。當push出現後，會保存當前的繪圖樣式設置和轉換，而pop會恢復重置這些設定值。在置的時候可以試著把這兩個函數註解掉看看會發生什麼事

let font;
let wallContent;
let smoke;

function preload(){
  font = loadFont('index18/MyriadPro-Bold.otf');
  smoke = loadImage('index18/b4.png');
  wallContent = loadImage('index18/blockWall.png');
}

function setup(){
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);

  
  stroke(255);
  strokeWeight(3);

  textFont(font);
  textAlign(CENTER, CENTER);
  textSize(128);
  pixelDensity(2);//slows frame rate
  noLoop()
}





function draw(){
  image(wallContent, 0, 0, windowWidth, windowHeight); //全版
  
  push(); 
  drawGradients()
  pop();

  push();
  noFill();
  testForRD('Hey Bro, You wanna Netflix and chill tonight? ', width/2, height/2);
  pop();


  image(smoke, 0, height/9-60, width, 1800);

}


function testForRD(glowText, x, y){
  glow(color(60,80,80,100), 100);
  text(glowText, x, y);

  glow(color(60,80,80,100), 300);
  text(glowText, x, y);

  glow(color(60,80,80,100), 12);
  text(glowText, x, y);
  glow(color(60,80,80,100), 40);
  text(glowText, x, y);
  glow(color(60,80,80,100), 40);
  glow(color(60,80,80,100), 40);
  text(glowText, x, y);

}


function drawGradients(){
  linearGradients(
    width/2, height/20,
    width/2, height-200,
    [color(30, 90, 60, 70), color(10, 10, 10, 10), color(10, 100, 40, 30)], 
  );
  rect(0, 0, width, height);

  radialGradients(
    width-300, height/3-200, 0,
    width-300, height/3-200, height/2,
    [color(48, 100, 100, 30), color(0, 0, 0, 0)], 
  );
  rect(0, 0, width, height);

  radialGradients(
    100, height/3*2, 0,
    100, height/3*2, height/2,
    [color(0, 100, 100, 40), color(0, 0, 0, 0)], 
  );
  rect(0, 0, width, height);


  radialGradients(
    400, height/3*1, 0,
    400, height/3*1, height/2,
    [color(280, 100, 100, 20), color(0, 0, 0, 0)], 
  );
  rect(0, 0, width, height);

}



function glow(glowColor, blurriness){
  drawingContext.shadowBlur = blurriness;
  drawingContext.shadowColor = glowColor;
}






function linearGradients(xStart, yStart, xEnd, yEnd, colors) {
	let gradient = drawingContext.createLinearGradient(xStart, yStart, xEnd, yEnd);
	multiColorGradient(gradient, colors)
}


function radialGradients(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd, colors) {

	let gradient = drawingContext.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd);
	multiColorGradient(gradient, 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;	
}

小結

補充一下，有去除背景的png在canvas中可以有透明的效果，前面講到的繪圖方法在交互作用下已經可以達到視覺很豐富的作品了，在練習的時候也可以盡量把習慣用的設定包成function，今天也謝謝大家的收看