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