資訊專欄INFORMATION COLUMN
摘要：學(xué)的時(shí)候，糾結(jié)的不是各種圖形如何繪制，反而是和這兩個(gè)函數(shù)什么時(shí)候用，它們到底做了什么。當(dāng)你想創(chuàng)建一個(gè)新的路徑時(shí)，調(diào)用此方法。是將筆點(diǎn)返回到當(dāng)前子路徑起始點(diǎn)的方法。這里的定義已經(jīng)說得比較清楚了，就沒什么必要贅述了。注以上的定義均來自
學(xué)canvas的時(shí)候，糾結(jié)的不是各種圖形如何繪制 ，反而是beginPath()和closePath()這兩個(gè)函數(shù)什么時(shí)候用，它們到底做了什么。
首先，這里說的是2D渲染的情況， 即CanvasRenderingContext2D對(duì)象（2D渲染上下文， 這個(gè)翻譯感覺好拗口）。
要明確的一點(diǎn)是，用canvas畫圖的思路：通過繪制路徑來繪制圖形，路徑是一系列點(diǎn)的集合 。PS里有個(gè)鋼筆工具，跟這個(gè)就很像，我們會(huì)先用鋼筆工具把路徑畫出來，然后可以選擇填充或者描邊。
搞不清楚概念的時(shí)候就仔細(xì)去看概念：
beginPath()CanvasRenderingContext2D.beginPath() 是 Canvas 2D API 通過清空子路徑列表開始一個(gè)新路徑的方法。 當(dāng)你想創(chuàng)建一個(gè)新的路徑時(shí)，調(diào)用此方法。
在我們繪制路徑的時(shí)候，實(shí)際上會(huì)有一個(gè)路徑列表幫我們紀(jì)錄當(dāng)前所畫的的子路徑，而這整一個(gè)列表就是我們當(dāng)前繪制的路徑。那么子路徑是什么鬼呢？意思就是比如你東畫一條線，西畫一條線，中間還畫了一條線，這三條線就是子路徑，它們不必首尾相連，可以相交也可以不相交。當(dāng)你調(diào)用beginPath()方法的時(shí)候，就會(huì)把這整個(gè)列表清空，無論你有沒有fill()或者stroke()，統(tǒng)統(tǒng)死啦死啦地。
closePath()CanvasRenderingContext2D.closePath() 是 Canvas 2D API 將筆點(diǎn)返回到當(dāng)前子路徑起始點(diǎn)的方法。它嘗試從當(dāng)前點(diǎn)到起始點(diǎn)繪制一條直線。 如果圖形已經(jīng)是封閉的或者只有一個(gè)點(diǎn)，那么此方法不會(huì)做任何操作。
注意，是子路徑。這里的定義已經(jīng)說得比較清楚了，就沒什么必要贅述了。
繪制路徑理解了它們的定義后，怎么用的話心里應(yīng)該也有一個(gè)大致的概念了。還有必要說一下moveTo()的定義
CanvasRenderingContext2D.moveTo()是 Canvas 2D API 將一個(gè)新的子路徑的起始點(diǎn)移動(dòng)到(x，y)坐標(biāo)的方法。
注意，是子路徑。所以繪制一條路徑（可以包括多條子路徑）的規(guī)則就是：
beginPath()一下
先繪制一條子路徑。有必要moveTo()的就moveTo，然后調(diào)用相應(yīng)繪制函數(shù)，最后有必要closePath()的就closePath。繪制多條就如法炮制。
填充fill()或者描邊stroke(), 或者兩者一起用。
對(duì)規(guī)則2的解釋：為什么說有必要moveTo和closePath才做相應(yīng)的操作呢？closePath好理解，我就是想單純的畫一條路徑出來而已，那就沒必要閉合了。至于moveTo，這取決于你想要畫的效果，就是字面的你想從哪個(gè)點(diǎn)開始畫呢？比如用arc()畫一個(gè)扇形，你就得先把起始點(diǎn)移到原點(diǎn)，不然就會(huì)畫成一個(gè)像拱橋的弓形了，點(diǎn)擊查看相關(guān)實(shí)例。
對(duì)規(guī)則3的解釋：因?yàn)橹爱嫷穆窂街皇羌o(jì)錄了一系列點(diǎn)的位置，并沒有真正畫出來，所以最后要調(diào)用函數(shù)來渲染
最后，注意有些方法會(huì)自動(dòng)閉合路徑，比如fill()和clip()。這也很好理解，因?yàn)檫@兩個(gè)方法都是作用于一塊區(qū)域，不閉合的話計(jì)算機(jī)哪里知道你要對(duì)哪塊區(qū)域進(jìn)行操作呢？這時(shí)候就可以不用調(diào)用closePath()了。stroke()不會(huì)自動(dòng)閉合路徑。點(diǎn)擊查看相關(guān)實(shí)例。
注：以上api的定義均來自MDN
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/84280.html
摘要：但需要注意的是，需在使用前調(diào)用。當(dāng)然，你愿意的話也可以兩者結(jié)合著用。繪制圖像相信很多入門的，都看不到這個(gè)地方，不就是繪制圖像的嘛，啊不準(zhǔn)確，是繪制圖形的。明確的說，是指圍繞原點(diǎn)圖像旋轉(zhuǎn)弧度。 前言 本文寫在七月底，進(jìn)來不加班就整理了一下，一些非?；A(chǔ)的知識(shí)，對(duì)于canvas剛?cè)腴T的人來說，值得閱讀一下。 來個(gè)氣勢(shì)如虹的開頭 與看各種文章相比，我更喜歡數(shù)學(xué)里的邏輯；與學(xué)習(xí)各種日新月異的框...
摘要：由于工作需求需要寫一個(gè)翻角效果鏈接右上角需要從無的狀態(tài)撕開一個(gè)標(biāo)記且有動(dòng)畫過程上圖是實(shí)現(xiàn)的效果圖不是對(duì)這個(gè)翻角效果的難點(diǎn)在于沒有翻開的時(shí)候露出的是下面的內(nèi)容實(shí)現(xiàn)角度來說純動(dòng)畫的設(shè)計(jì)方案并沒有相出一個(gè)好的對(duì)策于是撿起了好久之前學(xué)的入門級(jí)別的下 由于工作需求 , 需要寫一個(gè)翻角效果;showImg(https://segmentfault.com/img/bVYVm4?w=135&h=12...
摘要：由于工作需求需要寫一個(gè)翻角效果鏈接右上角需要從無的狀態(tài)撕開一個(gè)標(biāo)記且有動(dòng)畫過程上圖是實(shí)現(xiàn)的效果圖不是對(duì)這個(gè)翻角效果的難點(diǎn)在于沒有翻開的時(shí)候露出的是下面的內(nèi)容實(shí)現(xiàn)角度來說純動(dòng)畫的設(shè)計(jì)方案并沒有相出一個(gè)好的對(duì)策于是撿起了好久之前學(xué)的入門級(jí)別的下 由于工作需求 , 需要寫一個(gè)翻角效果;showImg(https://segmentfault.com/img/bVYVm4?w=135&h=12...
閱讀 2809·2021-09-26 10:19
閱讀 2206·2021-09-24 10:27
閱讀 2597·2021-09-01 10:42
閱讀 2370·2019-08-29 16:09
閱讀 2554·2019-08-29 15:17
閱讀 1507·2019-08-29 15:09
閱讀 693·2019-08-29 11:14
閱讀 2384·2019-08-26 13:25
