Day5 - 2D渲染環境基礎篇 II - 成為Canvas Ninja ～理解2D渲染的精髓 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 5

Modern Web

成為Canvas Ninja ! ~ 理解2D渲染的精髓系列第 5 篇

Day5 - 2D渲染環境基礎篇 II - 成為Canvas Ninja ～理解2D渲染的精髓

13th鐵人賽 canvas 2d

Mizok

2021-09-20 03:59:26

1413 瀏覽

何謂路徑？

要介紹路徑繪圖相關的api之前，必須要先理解什麼叫做『路徑』。
有學過電腦繪圖軟體，例如Adobe Photoshop, Adobe Illustrator的同學可能對『路徑』這個詞相當的熟悉，同時也可能可以更快速掌握2D渲染環境路徑繪圖的概念，但是考量到大多數人都沒有美術學經歷背景，所以這邊還是簡單做點說明~

路徑是使用繪圖工具建立的任意形狀的曲線，用它可勾勒出物體的輪廓，所以也稱之為輪廓線。為了滿足繪圖的需要，路徑又分為開放路徑和封閉路徑。 --維基百科

如果要白話一點的解釋『路徑(Path)』這個概念，可以想像成他是由一條透明的曲線所圈出來的一塊(非)開放區域，在canvas中我們可以利用(接下來會提到的)上色填充相關api為已經成形的路徑設定填充色(fill)/邊框色(stroke)。

有學過SVG相關知識的同學應該馬上就會發現這其實就跟SVG的Path 屬性是一樣的東西～沒錯，路徑(Path)其實是計算機繪圖領域的概念，並不是Canvas獨有的。

(圖片說明：在上圖我們可以看到我們必須要先有一個葉子形狀的Path，然後接著才可以對這個Path施加Fill和Stroke)

接下來我們要藉由實作的方式來加速學習api的使用方式，藉由實際操作API來畫一條線/一個圓/一個不規則形狀來加深對API的認識。

在開始之前，有一個特別需要注意的地方，那就是『繪製路徑』這個行為過程其實有點類似於用筆尖在紙面上作畫。
這個『筆尖』會是一個實際存在的座標(但是你看不到)，打個比方:假設我們現在畫了一段由A點畫向B點的路徑，那麼『筆尖』最後也會停在B上面。
這時候要注意，如果沒有利用API去移動筆尖，而是直接在別的地方畫了一個新的形狀，那麼先被畫出來的形狀和後被畫出來的形狀就會產生多餘的連線。

來畫一條線看看吧!

很遺憾的, IT邦似乎沒有提供embed codepen iframe 的功能，所以我只能把源碼寫在這裡了


function draw(){
  let cvs = document.querySelector('canvas');
  let ctx = cvs.getContext('2d');
  ctx.beginPath(); //宣告開始繪製路徑
  // 把筆尖的座標移動到50,50
  ctx.moveTo(50,50);
  // 從當前筆尖座標開始畫Path，一路畫到200,50
  ctx.lineTo(200,50);
  // 設定邊框顏色
  ctx.strokeStyle="#fff";
  // 賦予框線
  ctx.stroke();
  ctx.closePath(); //宣告結束繪製路徑, 這時『路徑』就不復存在，只會留下stroke 所帶來的顏色
}

(()=>{
  draw();
})()

codepen連結:
https://codepen.io/mizok_contest/pen/XWgeKoJ

起手式!

任何的路徑在開始畫之前，最好都要先使用ctx.beginPath()來宣告『嘿，我要開始畫路徑囉』;
然後在結束路徑繪製時，也最好使用ctx.closePath() 來宣告結束路徑的繪製(如果有手動把路徑連回原點，或用別的方法把路徑閉合，那也可以不用closePath);

一般來說如果不宣告結束，那麼路徑就會一直存續下去，這樣就沒有辦法畫出個別獨立的圖形（例如個別獨立顏色不同的方塊）

另外一提，ctx.fill() (填充顏色的api) 本身自帶closePath的效果，所以如果先執行了fill()，則可以不用額外宣告結束路徑繪製。

接著來畫一個圓!

// API 用法
void ctx.arc(x, y, radius, startAngle, endAngle [, counterclockwise]);
// x: 圓心X座標
// y: 圓心Y座標
// radius : 半徑
// startAngle: 起始角度=> 記得是順時針為正喔(而且必須要是徑度量)
// endEngle: 結束角度=> 記得是順時針為正喔(而且必須要是徑度量)
// counterClockwise : 是否以逆時針方向作畫

這邊我提出了一個錯誤的範例，和一個正確的範例，讓大家可以參考一下錯誤的原因和正確的寫法。

    function drawCircle1(){
  let cvs = document.querySelector('canvas');
  let ctx = cvs.getContext('2d');
  ctx.beginPath();
  // 把筆尖的座標移動到50,50
  ctx.moveTo(50,50);
  // 從當前筆尖座標為圓心畫一個半徑50的圓形Path
  ctx.arc(50,50,50,0,Math.PI*2,false)
  // 設定邊框顏色
  ctx.strokeStyle="#fff";
  // 賦予框線
  ctx.stroke();
  ctx.closePath();
  
  // 這邊會發現圓形跟預期的不太一樣，多了一條線，那就是因為我們提到的筆尖沒有移動而產生的問題
}

function drawCircle2(){
  let cvs = document.querySelector('canvas');
  let ctx = cvs.getContext('2d');
  ctx.beginPath();
  // 這邊我們把筆尖改成移動到實際畫圓的起始座標
  // 把筆尖的座標移動到250,200
  ctx.moveTo(250,200);
  // 從當前筆尖座標為圓心畫一個半徑50的圓形Path
  ctx.arc(200,200,50,0,Math.PI*2,false)
  // 設定邊框顏色
  ctx.strokeStyle="#fff";
  // 賦予框線
  ctx.stroke();
  ctx.closePath();
  
  // 這邊會發現這樣就正常了
}

(()=>{
  drawCircle1();
  drawCircle2();
})()

codepen連結：
https://codepen.io/mizok_contest/pen/RwgLGPQ

畫一個不規則形狀!

這邊我們利用畫二次曲線的API來畫一個由三條曲線構成的形狀，接著填充並且賦予框線。
這邊可以稍微理解一下Canvas 的API ～ ctx.curveTo是怎麼定義二次曲線的參數需求。
簡單來說這個api把一段二次曲線看作是一個由三個點所構成的曲線，三個點分別是：

開始畫線時筆尖的座標(第一端點)
曲線結束的端點座標(第二端點)
兩個端點沿著曲線拉出的切線所形成的交點，是為『控制點 cp』

void ctx.quadraticCurveTo(cpx, cpy, x, y);
// cpx: 曲線控制點X座標
// cpy: 曲線控制點Y座標
// x: 曲線結束點Ｘ座標
// y: 曲線結束點Y座標

function drawBlob(){
  let cvs = document.querySelector('canvas');
  let ctx = cvs.getContext('2d');
  ctx.beginPath();
  // 把筆尖的座標移動到200,200
  ctx.moveTo(200,200);
  // 從當前筆尖座標畫一條二次曲線到250,250（可以想像成拋物線），這時畫完後筆尖座標會移動到250,250
  ctx.quadraticCurveTo(500,300,250,250);
   // 從當前筆尖座標再畫一條二次曲線到100,100（可以想像成拋物線），這時畫完後筆尖座標會移動到100,100
  ctx.quadraticCurveTo(100,100,30,200);
  
  // 最後再連回起始點200,200
  ctx.quadraticCurveTo(30,30,200,200);
  
  // 設定邊框顏色
  ctx.strokeStyle="#fff";
  // 賦予框線
  ctx.stroke()
  
  // 設定邊框顏色
  ctx.fillStyle="red";
  // 賦予框線
  ctx.fill(); // 事實上fill會自帶closePath的效果
  ctx.closePath(); // 也就是說這一行可以不寫也沒差
}

(()=>{
  drawBlob();

})()

codepen連結：
https://codepen.io/mizok_contest/pen/ExXwNZL

Canvas Property的紀錄(save)與復原(restore)

我們在前面的三個範例都有去調整過渲染環境當前的fillStyle和 strokeStyle 來改變填充色和邊框的顏色。
(有電腦繪圖經驗的同學可能很快的就注意到了--這兩個東西其實就是Illustrator的前景色和背景色吧!)
要知道，Canvas的Property在同一時間底下是只有一個唯一值的，也就是說填充色在同一瞬間只能被指定一個hex作為類似全域變數的概念，
所以如果今天有一個需求，要先畫出一條紅色的線，接著再畫出一條藍色的線，流程便會是：

把fillstyle 設定成紅色
畫第一條線
把fillstyle 設定成藍色
畫第二條線

雖然這樣的場景很單純看起來沒什麼，但是如果今天到了很複雜的狀況，例如初始顏色是透過random函數隨機決定的，而繪製過程中突然有需求回歸原本random到的那個顏色，那就會需要有能夠復原Property的需求。

上述的場景雖然可以透過把字串值存取道臨時變數來達成，但是別忘了，Canvas 的Property 遠遠不止strokeStyle 一個，如果任何一個Property都要存一個變數，想必程式碼會變得很亂。

這時我們就可以透過Canvas 的原生API，也就是ctx.save()與 ctx.restore() (存檔與讀檔) 來達成上述需求。

這邊我提出了一個範例，範例中我先random 了一個hex色碼來作為初始顏色，畫一條線，接著把顏色改為藍色再畫一條線，最後我則是回歸原本ramdom到的顏色畫第三條線。

function randomColor(){
  const color = '#' +  Math.floor(Math.random()*16777215).toString(16);
  return color;
}

function drawLines(){
  let cvs = document.querySelector('canvas');
  let ctx = cvs.getContext('2d');
  // 把筆尖的座標移動到200,200
  ctx.beginPath();
  ctx.moveTo(200,200);
  // 拉線到300,200
  ctx.lineTo(300,200)
  ctx.closePath();
  //畫一條隨機顏色的線
  
  // 設定邊框顏色
  ctx.strokeStyle=randomColor();
  ctx.save(); //存檔
  // 賦予框線
  ctx.stroke()
  
  // 把筆尖的座標移動到200,220
  ctx.beginPath();
  ctx.moveTo(200,220);
  // 拉線到300,220
  ctx.lineTo(300,220)
  ctx.closePath();
  // 設定邊框顏色
  ctx.strokeStyle="blue";
  // 賦予框線
  ctx.stroke()
  
  
  // 把筆尖的座標移動到200,240
  ctx.beginPath();
  ctx.moveTo(200,240);
  // 拉線到300,220
  ctx.lineTo(300,240)
  ctx.closePath();
  // 設定邊框顏色
  ctx.restore(); //讀檔
  // 賦予框線
  ctx.stroke()
 
}

(()=>{
  drawLines();

})()

codepen連結：
https://codepen.io/mizok_contest/pen/PojJWaE