【Day03】Canvas-繪製矩形(Rect)

第 12 屆 iThome 鐵人賽

DAY 3

Modern Web

菜雞用Canvas/Pixi動動動動動起來系列第 3 篇

12th鐵人賽

卡羅奇奇

團隊甘阿餒

2020-09-16 09:31:29

2700 瀏覽

繪製圖形

網格(座標空間)概念

在繪圖之前，需先了解<canvas>網格(或是說座標空間)，如下圖網格上一單位相當於畫布上的1px，網格原點在左上角(也就是座標(0,0)，所有在畫布上的元素都是相對於這個原點，所以如圖中的藍色方塊的位置就是座標(x,y)，而之後的座標原點移動及畫布的旋轉縮放會和這些有關係。

<圖片來源:MDN>

<canvas>只支援一種原始圖形，就是矩形，所有其他圖形都必須由一或多個繪圖路徑構成。

矩形繪製

不像之後的路徑繪製函數，以下三個函數會直接在畫布上畫出矩形

方法	描述
`fillRect(x, y, width, height)`	畫一個左上角位於(x, y)、寬width、高height的被填滿矩形。
`strokeRect(x, y, width, height)`	畫一個左上角位於(x, y)、寬width、高height的矩形邊框
`clearRect(x, y, width, height)`	清除一個左上角位於(x, y)、寬width、高height的指定矩形區域內容，使其變為全透明

↓以下方法應該放在明天的路徑繪製的類別，但因為都是矩形相關，所以放在一起做比較

方法	描述
`rect(x, y, width, height)`	畫一個左上角位於(x, y)、寬width、高height的矩形路徑

小小範例

(顏色沒有特別設的話，預設都是黑色）
codepen範例連結

ctx.fillRect(25,25,100,100) //畫了一個座標為(25,25)的100px * 100px的矩形
ctx.clearRect(50,50,50,50) //再清除一個座標為(50,50)的50px * 50px的矩形形狀
ctx.strokeRect(67.5,67.5,15,15) //最後畫一個座標為(67.5,67.5)的15px * 15px的矩形邊框

最後成果：

～如有疑問或是錯誤，歡迎不吝指教～

參考來源：
[1]https://developer.mozilla.org/zh-TW/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
[2]https://www.w3school.com.cn/tags/html_ref_canvas.asp
[3]https://www.runoob.com/w3cnote/html5-canvas-intro.html