html5 canvas 基本用法

首先來詳細介紹矩形的繪製吧，矩形有三個函數能夠繪製的：

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用於指定矩形的寬和高。這對於有基礎的同窗，仍是很是簡單的。下面，咱們使用HTML5 canvas 元素詳細教程一裏提供的 draw() 函數，咱們添加了上面的三個函數。

繪製矩形的例子 Rectangular shape example

        運行的結果應該和右邊圖形如出一轍的。fillRect 函數畫了100x100黑色矩形，clearRect 函數清空了中間 60x60 大小的方塊，而後strokeRect 函數又在清空了的空間畫出了一個 50x50 的矩形邊框。。

繪製路徑 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 （新的座標位置）做爲參數。