DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> 用HTML5的canvas繪制矩形和路徑
用HTML5的canvas繪制矩形和路徑
編輯:HTML5教程     
首先來詳細介紹矩形的繪制吧,矩形有三個函數可以繪制的:
fillRect(x,y,width,height) : Draws a filled rectangle
strokeRect(x,y,width,height) : Draws a rectangular outline
clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent

上面的函數都接受四個參數,X和Y用於指定矩形左上角也就是相對於原點的位置,width和height用於指定矩形的寬和高。這對於有基礎的同學,還是非常簡單的。


繪制路徑 Drawing paths

繪制路徑不像繪制矩形那要,需要一些額外的步驟,下面是需要使用的函數和步驟:
beginPath()
closePath()
stroke()
fill()
第一步:用 beginPath 創建路徑。在在內存中,徑路是以一組子路徑(直線,弧線等)的形式儲存的,它們共同構成一個圖形。每次調用 beginPath,子路徑組都會被重置,然後可以繪制新的圖形。
第二步:是實際繪制路徑的部分,很快我們就會看到。
第三步:調用 closePath 方法,它會嘗試用直線連接當前端點與起始端點來關閉路徑,但如果圖形已經關閉或者只有一個點,它會什麼都不做。這一步不是必須的。
第四部:也就是最後一步,調用 stroke或 fill 方法,這時,圖形才是實際的繪制到 canvas上去。stroke是繪制圖形的邊框,fill會用填充出一個實心圖形。當調用 fill 時,開放的路徑會自動閉合,而無須調用 closePath ,這需要大家注意。
畫一個簡單圖形(如三角形)的代碼如下。
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();

moveTo 是一個十分有用的方法,它是繪制路徑的實用方法的一部分。你可以把它想象成是把筆提起,並從一個點移動到另一個點的過程。

moveTo(x, y)
它接受 x 和 y (新的坐標位置)作為參數。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved