FUI系列：來畫網格吧

圖片來源：unsplash

前言

其實一直很喜歡FUI這類題材，也很剛好最近工作上頻繁接觸到canvas，就想來紀錄FUI中的各種元素是怎麼被建出來的，也藉此熟練各種canvas api和作圖技巧。

那不管是介面的拖拉、縮放、FUI/HUD或純粹畫個帥氣的靜態介面，網格都會是第一步要做的，就相當於canvas領域的hello world一樣。所以接下來就是介紹一下各種網格的做法～

結構

├── fui.html
└── js
    └── fui.js

HTML,CSS

JS

起手式，抓到canvas的DOM並使它佔滿全屏

前面都設定完畢後，來介紹一下canvas的幾個基本api～，這些api是前面宣告canvas.getContext(“2d”) 的方法

ctx.beginPath() 是產生新路徑，只要是畫路徑類型前都要執行，繪製路徑的步驟是這樣：產生路徑->各種指令畫出路徑->結束路徑->幫這段路徑上色或加寬等等屬性調整

ctx.moveTo(x, y) 是移動繪畫座標，本身並不會畫任何圖案，例如ctx.moveTo(50, 0)就會把座標移動到x軸50、y軸0的地方，並準備隨時開始繪畫，有點像你把筆放到紙上某個點

ctx.lineTo(x, y) 是從上次座標畫線到這次指定坐標，所以ctx.lineTo(50, 100)的話就會從上次x:50 y:0 的地方畫線到x:50 y:100，就會是一條從上到下的垂直線

ctx.stroke() 是幫剛剛描述的路徑加上編框，其實就是線，那為什麼有ctx.lineTo還要上邊框呢？因為描述完路徑後不一定都是線段，有時候是填滿，像畫愛心之類的可能就是裡面填滿紅色但沒有外框，所以描述路徑是一回事，最後怎麼呈現這段路徑是另一回事

有了這些幾本工具之後就是如何應用來畫網格了～

方形網格

我們需要把很多條橫線和直線畫出來，但不確定對方裝置是手機、平板還是電腦，所以longer相當於取最長的邊做一個最大的正方形範圍

公差設為d，依序把直線橫線畫出來，如下圖：

三角形網格

畫三角形網格需要一點三角函數，一個圓等於2Pi (360度)，所以60度等於2Pi/6，半徑r一樣抓長邊

第一個迴圈的第一段是“往右下的斜邊”，相當於五點鐘的指針。第二段是“往左下的斜邊”，相當於七點鐘的指針。第三段是水平線

又因為轉了60度或120度，如果從x:0開始放到x:canvas.width 會看到畫面的下半部有缺漏

所以必須把x:0左側的“往右下斜邊”和x:canvas.width右側的“往左下斜邊”再多做一些，才能讓畫面是完整的網格

設第二個迴圈讓x:0左側的斜線也依序長出來，這個迴圈的極限就靠offset來限制，同理第一個迴圈的極限也可以加上這個offset，讓“往左下斜邊”也多放一些，而水平線就沒有缺漏問題，只要在第一個迴圈中每往下一個正三角形的高放一條就好。全部設置好會如下圖：

其實網格的總類還有非常多，日後有發現值得分享的再放上來～