Canvas是一個用於在網頁上繪製圖形的API,它提供了多種方法來繪製和操作圖形。以下是Canvas的一些常用方法:
getContext(): 此方法用於獲取Canvas的繪圖上下文,返回一個對象,該對象提供了在畫布上繪圖的方法和屬性。例如,`var context = canvas.getContext("2d");` 獲取2D繪圖上下文。
beginPath(): 開始一條路徑,或重置當前路徑。路徑可以用於繪製線條、曲線和形狀。
closePath(): 創建從當前點回到起始點的路徑。
lineTo(x, y): 添加一個新點,然後在畫布中創建從該點到最後指定點的線條。
rect(x, y, width, height): 創建矩形。
arc(x, y, radius, startAngle, endAngle): 創建弧/曲線。
moveTo(x, y): 把路徑移動到畫布中的指定點,不創建線條。
stroke(): 繪製已定義的路徑。
fill(): 通過填充路徑的內容區域生成實心的圖形。
clearRect(x, y, width, height): 清除矩形區域的內容,用於擦除畫布上的圖形。
fillRect(x, y, width, height): 繪製一個填充的矩形。
strokeRect(x, y, width, height): 繪製一個矩形的框線。
arcTo(x1, y1, x2, y2, radius): 根據給定的控制點和半徑畫一段圓弧,最後再以直線連線兩個控制點。
quadraticCurveTo(cp1x, cp1y, x, y): 繪製二次貝塞爾曲線。
以上方法可以結合使用,以創建複雜的圖形和動畫。