FUI系列:來畫網格吧
前言
其實一直很喜歡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,讓“往左下斜邊”也多放一些,而水平線就沒有缺漏問題,只要在第一個迴圈中每往下一個正三角形的高放一條就好。全部設置好會如下圖:
其實網格的總類還有非常多,日後有發現值得分享的再放上來~