Canvas是HTML5中新增的元素，專門用來繪制圖形，相當于在頁面中放了一張“畫布”，可以在里面繪制圖形，但是不是指用鼠標畫圖，而是需要用Javascript編寫需要繪制的圖形的腳本。
我們利用canvas可以繪制出下圖：
在繪制上圖之前，我們先來看下相關知識點：
一、 開始創建路徑
使用beginPath方法開始創建路徑。beginPath() 方法表示開始一條路徑，或重置當前的路徑。簡單來說，其實就是告訴畫布，我要開始畫草稿了，請把之前的草稿都清除掉。
這個方法不設置參數，通過調用這個方法開始創建路徑，在案例中我們需要循環繪制圓形，在循環的幾次創建路徑的過程中，每次開始創建是都要調用beginPath()。
語法是：
context. beginPath ();
二、 創建圓形路徑
創建圓形路徑的時候，需要使用圖形上下文對象的arc()方法，這個方法的定義是：
arc() 方法創建弧/曲線(用于創建圓或部分圓)。
這個方法的語法是：
這個方法使用6個參數，
x為圓的中心的 x 坐標;
y為圓的中心的 y 坐標;
r為圓的半徑;sAngle為起始角，以弧度計(弧的圓形的三點鐘位置是 0 度);
eAngle為結束角，以弧度計;
counterclockwise為規定應該逆時針還是順時針繪圖(False = 順時針，true = 逆時針)。
arc()方法不僅可以繪制圓形，還可以繪制圓弧形，因此，必須指定起始角和結束角
三、 關閉路徑
路徑創建完畢后，使用圖形上下文對象的closePath()方法關閉路徑。
closePath() 方法創建從當前點到開始點的路徑。
語法：
context.closePath();
關閉路徑后，路徑的創建工作就完成了。但是需要注意的是，這個時候只是路徑創建完畢而已，還沒有真正繪制任何圖形。我們接著來學習如何設置繪制樣式和填充當前路徑。
>>本文地址：http://www.028benet.com/zhuanye/2020/48620.html
聲明:本站稿件版權均屬中公教育優就業所有，未經許可不得擅自轉載。
1 您的年齡
2 您的學歷
3 您更想做哪個方向的工作？
大前端
大數據
互聯網營銷
Java
Linux
Python
嵌入式
全域電商運營
軟件測試
室內設計
平面設計
電商設計
網頁設計
UI設計
VR/AR
網絡安全
新媒體
直播帶貨
智能機器人
中公教育IT培訓品牌
400-650-7353
Copyright©1999-
北京中公教育科技有限公司 .All Rights Reserved
京ICP備10218183號-88
京ICP證161188號
京公網安備11010802020723號
投訴建議：400-650-7353
Java培訓
軟件測試培訓
Web培訓
Linux培訓
Python培訓
互聯網營銷培訓
UI培訓
大數據培訓
官方公眾號 回復"大禮包"享福利 
領學習資料 分享IT知識 
閱讀()
分享
手機端入口
