HTML5 canvas基本繪圖之繪製曲線

作者：Eve Cole 更新時間：2025-02-16 03:12:02

<canvas></canvas>是HTML5中新增的標籤，用於繪製圖形，實際上，這個標籤和其他的標籤一樣，其特殊之處在於該標籤可以獲取一個CanvasRenderingContext2D對象，我們可以通過JavaScript腳本來控制該對象進行繪圖。

<canvas></canvas>只是一個繪製圖形的容器，除了id、class、style等屬性外，還有height和width屬性。在<canvas>>元素上繪圖主要有三步：

1.獲取<canvas>元素對應的DOM對象，這是一個Canvas對象；

2.調用Canvas對象的getContext()方法，得到一個CanvasRenderingContext2D對象；

3.調用CanvasRenderingContext2D對象進行繪圖。

繪製曲線

跟繪製曲線的有四個函數，分別是：

•context.arc(x,y,r,sAngle,eAngle,counterclockwise);用於創建弧/曲線（用於創建圓或部分圓）。接收的參數含義：

| 參數| 含義|

| :--- |:---|

| x | 圓的中心的x 坐標|

|y|圓的中心的y 坐標|

|r|圓的半徑|

|sAngle|起始角，以弧度計（弧的圓形的三點鐘位置是0 度）|

|eAngle|結束角，以弧度計|

|counterclockwise|可選。規定應該逆時針還是順時針繪圖。 False = 順時針，true = 逆時針|

下面是幾個arc()函數的幾個示例：

JavaScript Code複製內容到剪貼板