canvas學習筆記

function draw()
}draw();

canvas的寬度和高度不能用百分比，不然會出現模糊扭曲的現象。

cvs.width--cvs.height---->定義的是畫布的寬度和高度。可以把畫布的寬度和高度定義的高一些，裡面繪製的東西大一些，然後就可以實現在高畫質螢幕下也不會變得模糊了。

cvs.style.width和cvs.style.height------>定義的是canvas影象的寬度和高度，類似與img，改變乙個值，另乙個值會等比縮放。如果兩個值同時改變的話，很有可能影象會變形。

總結如下：cvs.style.width和cvs.style.height的比例一定要和cvs.width--cvs.height的寬高比例是一樣的才行。不然變形。

canvas提供了三種方法繪製矩形：

fillrect(x, y, width, height)

繪製乙個填充的矩形

strokerect(x, y, width, height)

繪製乙個矩形的邊框

clearrect(x, y, width, height)

清除指定矩形區域，讓清除部分完全透明。

上面提供的方法之中每乙個都包含了相同的引數。x與y指定了在canvas畫布上所繪製的矩形的左上角（相對於原點）的座標。width和height設定矩形的尺寸。

ctx.fillrect(100,100,100,100);
ctx.clearrect(120,120,70,70); //順序不能亂,如果是先strokerect的話，就會清除了這個區域了。
ctx.strokerect(130,130,50,50);

圖形的基本元素是路徑。路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點的集合。乙個路徑，甚至乙個子路徑，都是閉合的。使用路徑繪製圖形需要一些額外的步驟。

首先，你需要建立路徑起始點。

然後你使用畫圖命令去畫出路徑。

之後你把路徑封閉。

一旦路徑生成，你就能通過描邊或填充路徑區域來渲染圖形。

以下是所要用到的函式：

beginpath()新建一條路徑，生成之後，圖形繪製命令被指向到路徑上生成路徑。

closepath()閉合路徑之後圖形繪製命令又重新指向到上下文中。

stroke()通過線條來繪製圖形輪廓。

fill()通過填充路徑的內容區域生成實心的圖形。

//
繪製乙個三角形
ctx.beginpath();
ctx.moveto(275,255);
ctx.lineto(300,275);
ctx.lineto(255,275);
ctx.closepath();
ctx.stroke();

生成路徑的第一步叫做beginpath()。本質上，路徑是由很多子路徑構成，這些子路徑都是在乙個列表中，所有的子路徑（線、弧形、等等）構成圖形。而每次這個方法呼叫之後，列表清空重置，然後我們就可以重新繪製新的圖形。

注意：當前路徑為空，即呼叫beginpath()之後，或者canvas剛建的時候，第一條路徑構造命令通常被視為是moveto（），無論最後的是什麼。出於這個原因，你幾乎總是要在設定路徑之後專門指定你的起始位置。

第二步就是呼叫函式指定繪製路徑，本文稍後我們就能看到了。

第三，就是閉合路徑closepath(),不是必需的。這個方法會通過繪製一條從當前點到開始點的直線來閉合圖形。如果圖形是已經閉合了的，即當前點為開始點，該函式什麼也不做。

注意：當你呼叫fill()函式時，所有沒有閉合的形狀都會自動閉合，所以你不需要呼叫closepath()函式。但是呼叫stroke()時不會自動閉合。

繪製乙個笑臉

ctx.beginpath();

ctx.arc(500,500,100,0,math.pi*2,true); //

false = 順時針，true = 逆時針

繪製乙個笑臉

ctx.beginpath();

ctx.arc(500,500,100,0,math.pi*2,true); //

false = 順時針，true = 逆時針

繪製直線，需要用到的方法lineto()。

lineto(x, y)

繪製一條從當前位置到指定x以及y位置的直線。

該方法有兩個引數：x以及y ，代表座標系中直線結束的點。開始點和之前的繪製路徑有關，之前路徑的結束點就是接下來的開始點，等等。。。開始點也可以通過moveto()函式改變。

//繪製乙個充填的三角形
ctx.beginpath();
ctx.moveto(300,255);
ctx.lineto(300,355);
ctx.lineto(400,355);
ctx.fill();

繪製圓弧或者圓，我們使用arc()方法。當然可以使用arcto()，不過這個的現實並不是那麼的可靠，所以我們這裡不作介紹。

arc(x, y, radius, startangle, endangle, anticlockwise)

畫乙個以（x,y）為圓心的以radius為半徑的圓弧（圓），從startangle開始到endangle結束，按照anticlockwise給定的方向（預設為順時針）來生成。