HTML5 Canvas 起步(2) - 路徑

2020-03-24 18:21:08

字體：大中小

來源：轉載

供稿：網友

圖形的基礎-路徑在Canvas中，所有基本圖形都是以路徑為基礎的，也就是說，我們在調用2dContext的lineTo、rect等方法時，其實就是往已經的context路徑集合中再添加一些路徑點，在最后使用fill或stroke方法進行繪制時，都是依據這些路徑點來進行填充或畫線。在每次開始繪制路徑前，都應該使用context.beginPath()方法來告訴Context對象開始繪制一個新的路徑，否則接下來繪制的路徑會與之前繪制的路徑疊加，在填充或畫邊框時就會出現問題。在繪制完成路徑后，可以直接使用context.closePath()方法來關閉路徑，或者手動關閉路徑。另外，如果在填充時路徑沒有關閉，那么Context會自動調用closePath方法將路徑關閉。基本路徑方法1.beginPath,closePath這兩個方法在前面已經介紹過，分別用來通知Context開始一個新的路徑和關閉當前的路徑。在Canvas中使用路徑時，應該要保持一個良好的習慣，每次開始繪制路徑前都要調用一次beginPath方法，否則畫出來的效果難看不說，還會嚴重影響性能。在下面這張圖中，左邊的圖形在每次繪制矩形前都調用了一次beginPath來清除之前的路徑并重新開始繪制新的路徑，而后面的圖形則就只在繪制所有圖形前調用了一次beginPath來清除路徑，因此，雖然這里是使用的邊框色是#666，但是右邊的圖形顏色比左邊的深一些，因為每次使用stroke繪制邊框時，會把之前的路徑再次繪制一遍，疊加起來顏色就比原來深一些。

提示：您可以先修改部分代碼再運行
在Context中路徑數較少時，如果不考慮顯示效果，性能上還可以接受，但是如果Context中的路徑數很多時，在開始繪制新路徑前不使用beginPath的話，因為每次繪制都要將之前的路徑重新繪制一遍，這時性能會以指數下降。因此，除非有特殊需要，每次開始繪制路徑前都要調用beginPath來開始新路徑。2.移動與直線moveTo,lineTo,rect

提示：您可以先修改部分代碼再運行
voidmoveTo(infloatx,infloaty);在Canvas中繪制路徑，一般是不需要指定起點的，默認的起點就是上一次繪制路徑的終點，因此，如果需要指定起點的話，就需要使用moveTo方法來指定要移動到的位置。voidlineTo(infloatx,infloaty);lineTo方法則是繪制一條直接路徑到指定的位置。在調用完lineTo方法后，Context內部的繪制起點會移動到直線的終點。voidrect(infloatx,infloaty,infloatw,infloath);rect方法用來繪制一個矩形路徑，通過參數指定左上角位置以及寬和高。在調用rect后，Context的繪制起點會移動到rect繪制的矩形的左上角。rect方法與后面要介紹的arc方法與其他路徑方法有一點不同，它們是使用參數指定起點的，而不是使用Context內部維護的起點。3.曲線arcTo,arc,quadraticCurveTo,bezierCurveTovoidarcTo(infloatx1,infloaty1,infloatx2,infloaty2,infloatradius);按照WHATWG文檔的說明，這個方法是畫一個與兩條射線相切的的圓弧，兩條射線其中一條為穿過Context繪制起點，終點為(x1,y1)，另外一條為穿過(x2,y2)，終點為(x1,y1)，這條圓弧為最小的與這兩條射線相切的圓弧。在調用完arcTo方法后，將圓弧與射線(x1,y1)-(x2,y2)的切點添加到當前路徑中，做為下次繪制的起點。在測試中發現，Firefox和Opera目前對這個方法的支持并不好，只有Chrome和Safari4能繪制出正確的路徑。圖中的的兩條灰色直線是偏移4個像素后的兩條射線所在的位置。

提示：您可以先修改部分代碼再運行
voidarc(infloatx,infloaty,infloatradius,infloatstartAngle,infloatendAngle,inbooleananticlockwise);arc方法用來繪制一段圓弧路徑，通過圓心位置、起始弧度、終止弧度來指定圓弧的位置和大小，這個方法也不依賴于Context維護的繪制起點。而在畫圓弧時的旋轉方向則由最后一個參數anticlockwise來指定，如果為true就是逆時針，false則為順時針。voidquadraticCurveTo(infloatcpx,infloatcpy,infloatx,infloaty);quadraticCurveTo方法用來繪制二次樣條曲線路徑，參數中cpx與cpy指定控制點的位置，x和y指定終點的位置，起點則是由Context維護的繪制起點。voidbezierCurveTo(infloatcp1x,infloatcp1y,infloatcp2x,infloatcp2y,infloatx,infloaty);bezierCurveTo方法用來繪制貝塞爾曲線路徑，它與quadraticCurveTo相似，不過貝塞爾曲線有兩個控制點，因此參數中的cp1x,cp1y,cp2x,cp2y用來指定兩個控制點的位置，而x和y指定綹的位置。

提示：您可以先修改部分代碼再運行
4.fill,stroke,clipfill與stroke這兩個方法很好理解，分別用來填充路徑與繪制路徑線條。clip方法用來給Canvas設置一個剪輯區域，在調用clip方法之后的代碼只對這個設定的剪輯區域有效，不會影響其他地方，這個方法在要進行局部更新時很有用。默認情況下，剪輯區域是一個左上角在(0,0)，寬和高分別等于Canvas元素的寬和高的矩形。在畫這個圖時，雖然兩次都是使用fillRect(0,0,100,100)填充了一個100x100大小矩形，但是顯示的結果卻是第二次填充的只是中間的一小塊，這是因為在兩次填充之間使用clip方法設定了剪輯區域，這樣第二次填充時只會影響到所設定的中間那一小部分區域。

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：五個好用的Linux HTML編緝器推薦

下一篇：HTML img標簽的絕對路徑怎么寫？HTML img標簽絕對路