iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
0
Modern Web

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

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

  • 分享至 

  • xImage
  •  

繪製圖形

網格(座標空間)概念

在繪圖之前,需先了解<canvas>網格(或是說座標空間),如下圖網格上一單位相當於畫布上的1px,網格原點在左上角(也就是座標(0,0),所有在畫布上的元素都是相對於這個原點,所以如圖中的藍色方塊的位置就是座標(x,y),而之後的座標原點移動及畫布的旋轉縮放會和這些有關係。
https://ithelp.ithome.com.tw/upload/images/20200913/20111500qcxyxPxnYY.png
<圖片來源: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的矩形邊框

最後成果:
https://ithelp.ithome.com.tw/upload/images/20200913/201115003RWzersIHT.png

~如有疑問或是錯誤,歡迎不吝指教~

參考來源
[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


上一篇
【Day02】Canvas-基本介紹
下一篇
【Day04】Canvas-繪製路徑(Path)
系列文
菜雞用Canvas/Pixi動動動動動起來30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言