canvas里的beginPath和closePath什么時候使用？

monw3c 發布于2019-08-20 18:16 / 465人閱讀

摘要：學的時候，糾結的不是各種圖形如何繪制，反而是和這兩個函數什么時候用，它們到底做了什么。當你想創建一個新的路徑時，調用此方法。是將筆點返回到當前子路徑起始點的方法。這里的定義已經說得比較清楚了，就沒什么必要贅述了。注以上的定義均來自

學canvas的時候，糾結的不是各種圖形如何繪制，反而是beginPath()和closePath()這兩個函數什么時候用，它們到底做了什么。

首先，這里說的是2D渲染的情況，即CanvasRenderingContext2D對象（2D渲染上下文，這個翻譯感覺好拗口）。

要明確的一點是，用canvas畫圖的思路：通過繪制路徑來繪制圖形，路徑是一系列點的集合 。PS里有個鋼筆工具，跟這個就很像，我們會先用鋼筆工具把路徑畫出來，然后可以選擇填充或者描邊。

搞不清楚概念的時候就仔細去看概念：

beginPath()

CanvasRenderingContext2D.beginPath() 是 Canvas 2D API 通過清空子路徑列表開始一個新路徑的方法。當你想創建一個新的路徑時，調用此方法。

在我們繪制路徑的時候，實際上會有一個路徑列表幫我們紀錄當前所畫的的子路徑，而這整一個列表就是我們當前繪制的路徑。那么子路徑是什么鬼呢？意思就是比如你東畫一條線，西畫一條線，中間還畫了一條線，這三條線就是子路徑，它們不必首尾相連，可以相交也可以不相交。當你調用beginPath()方法的時候，就會把這整個列表清空，無論你有沒有fill()或者stroke()，統統死啦死啦地。

closePath()

CanvasRenderingContext2D.closePath() 是 Canvas 2D API 將筆點返回到當前子路徑起始點的方法。它嘗試從當前點到起始點繪制一條直線。如果圖形已經是封閉的或者只有一個點，那么此方法不會做任何操作。

注意，是子路徑。這里的定義已經說得比較清楚了，就沒什么必要贅述了。

繪制路徑

理解了它們的定義后，怎么用的話心里應該也有一個大致的概念了。還有必要說一下moveTo()的定義

CanvasRenderingContext2D.moveTo()是 Canvas 2D API 將一個新的子路徑的起始點移動到(x，y)坐標的方法。

注意，是子路徑。所以繪制一條路徑（可以包括多條子路徑）的規則就是：

beginPath()一下

先繪制一條子路徑。有必要moveTo()的就moveTo，然后調用相應繪制函數，最后有必要closePath()的就closePath。繪制多條就如法炮制。

填充fill()或者描邊stroke(), 或者兩者一起用。

對規則2的解釋：為什么說有必要moveTo和closePath才做相應的操作呢？closePath好理解，我就是想單純的畫一條路徑出來而已，那就沒必要閉合了。至于moveTo，這取決于你想要畫的效果，就是字面的你想從哪個點開始畫呢？比如用arc()畫一個扇形，你就得先把起始點移到原點，不然就會畫成一個像拱橋的弓形了，點擊查看相關實例。

對規則3的解釋：因為之前畫的路徑只是紀錄了一系列點的位置，并沒有真正畫出來，所以最后要調用函數來渲染

最后，注意有些方法會自動閉合路徑，比如fill()和clip()。這也很好理解，因為這兩個方法都是作用于一塊區域，不閉合的話計算機哪里知道你要對哪塊區域進行操作呢？這時候就可以不用調用closePath()了。stroke()不會自動閉合路徑。點擊查看相關實例。

注：以上api的定義均來自MDN

云服務器 GPU云服務器使用canvas畫圖 closePath beginPath 什么時候開始的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84280.html

canvas入門里，你沒注意到的那些知識

摘要：但需要注意的是，需在使用前調用。當然，你愿意的話也可以兩者結合著用。繪制圖像相信很多入門的，都看不到這個地方，不就是繪制圖像的嘛，啊不準確，是繪制圖形的。明確的說，是指圍繞原點圖像旋轉弧度。前言本文寫在七月底，進來不加班就整理了一下，一些非常基礎的知識，對于canvas剛入門的人來說，值得閱讀一下。來個氣勢如虹的開頭與看各種文章相比，我更喜歡數學里的邏輯；與學習各種日新月異的框...

tuniutech 2019-08-22 11:22 評論0 收藏0
簡單的canvas翻角效果

摘要：由于工作需求需要寫一個翻角效果鏈接右上角需要從無的狀態撕開一個標記且有動畫過程上圖是實現的效果圖不是對這個翻角效果的難點在于沒有翻開的時候露出的是下面的內容實現角度來說純動畫的設計方案并沒有相出一個好的對策于是撿起了好久之前學的入門級別的下由于工作需求 , 需要寫一個翻角效果;showImg(https://segmentfault.com/img/bVYVm4?w=135&h=12...

kun_jian 2019-08-21 17:43 評論0 收藏0
簡單的canvas翻角效果

摘要：由于工作需求需要寫一個翻角效果鏈接右上角需要從無的狀態撕開一個標記且有動畫過程上圖是實現的效果圖不是對這個翻角效果的難點在于沒有翻開的時候露出的是下面的內容實現角度來說純動畫的設計方案并沒有相出一個好的對策于是撿起了好久之前學的入門級別的下由于工作需求 , 需要寫一個翻角效果;showImg(https://segmentfault.com/img/bVYVm4?w=135&h=12...

Magicer 2019-08-01 18:03 評論0 收藏0