首頁 > web前端 > H5教程 > HTML5在canvas中繪製複雜形狀附效果截圖_html5教學技巧

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

WBOY
發布: 2016-05-16 15:47:28
原創
1710 人瀏覽過
一、繪製複雜形狀或路徑

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

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中繪製複雜🎜>

複製代碼代碼如下:




HTML5





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






五、繪製效果

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板