HTML Canvas - 路徑

路徑是點的連續對映，作為一個軌跡，它沒有重複的頂點，並且可以以任何角度前進，直到到達最終目標點。

CanvasRenderringContext2D 和 Path2D 介面包含屬性和方法，可以使用介面的上下文物件將路徑新增到畫布元素上。該介面可用於新增路徑以及在 <canvas> 元素上關閉路徑。

在 Canvas 元素內新增路徑和繪製形狀可用的屬性和方法如下表所示。

序號	方法及描述
1	addPath() 此方法可用於為當前路徑新增額外的路徑。
2	arc() Canvas API 的 arc() 方法可用於在開始的路徑上繪製圓弧。
3	arcTo() Canvas API 的 arcTo() 方法可用於使用給定的控制點和半徑作為引數，在當前路徑上繪製圓弧。
4	beginPath() 當我們要使用路徑在 Canvas 元素上繪製圖形時，我們呼叫此方法來建立一個新的路徑。
5	bezierCurveTo() CanvasRenderingContext2D 介面的 bezierCurveTo() 方法繪製
6	clip() 此方法用於裁剪路徑的區域並在其中繪製其他圖形。
7	closePath() closePath() 方法透過執行必要的操作來關閉當前路徑。
8	drawFocusIfNeeded() 要將焦點新增到現有路徑或即將建立的路徑，介面可以呼叫此方法。
9	ellipse() 此方法用於在 Canvas 元素的繪圖表面上繪製橢圓弧。
10	fill() 此方法預設情況下使用黑色填充當前或給定的路徑，除非提供了 fillStyle 屬性。
11	isPointInPath() 要檢查點是否在路徑內部或路徑上，我們使用此方法。它以點作為引數並返回布林值。
12	isPointInStroke() Canvas 2D API 的此方法驗證給定點是否在描邊的路徑內，並返回布林值（true 或 false）。
13	moveTo() 上下文物件透過引數將子路徑移動到給定的座標。
14	Path2D() 此建構函式方法建立一個 Path2D 物件，從中可以呼叫所有形狀並將其繪製到 Canvas 元素上。
15	quadraticCurveTo() 此方法使用路徑上下文繪製二次貝塞爾曲線。
16	scrollPathIntoView() Canvas 2D API 的此方法在被呼叫時，會將作為引數傳遞的可用路徑滾動到檢視中。
17	stroke() Canvas API 的此方法為 Canvas 元素內繪製的當前路徑或形狀新增描邊。

列印頁面

廣告