HTML5在canvas中繪製複雜形狀附效果截圖_html5教學技巧

一、繪製複雜形狀或路徑

在簡單的矩形不能滿足需求的情況下，繪圖環境提供瞭如下方法來繪製複雜的形狀或路徑。

beginPath() ： 開始繪製一條新路徑。
closePath() ： 透過繪製一條目前點到路徑起點的線段來閉合形狀。
fill() ， stroke() ： 填滿形狀或繪製空心形狀。
moveTo() ： 將目前點移到點(x,y)。
lineTo() ： 從目前點繪製一條直線到點(x,y)。
arc(x,y,r,sAngle,eAngle,counterclockwise) ： 繪製一條指定半徑的弧到點(x,y)。

二、用這些方法繪製複雜形狀需遵循以下步驟

使用beginPath()方法開始繪製路徑。
使用moveTo()、lineTo()、arc()、方法建立線段。
使用closePath()結束繪製並閉合形狀（可選）。
使用stroke()或fill()繪製路徑的外邊框或填滿形狀。使用fill()會自動閉合所有未閉合路徑。

三、弧arc()繪製說明
 
 
四、在canvas中繪製複雜🎜>

複製代碼代碼如下:

提示：你的瀏覽器不支援標籤






五、繪製效果