HTML5 使用canvas API 填充樣式

正如你所期望的那樣，能影響canvas圖形外觀的并非只有描邊，另一個常用于修改圖形的方法是指定如何填充其路徑和子路徑。

【例題】填充樣式

代碼如下：

// 將填充色設(shè)置為綠色并填充樹冠

context.fillStyle = '#3399001';

context.fill();

    首先，將fillStyle屬性設(shè)置成合適的顏色（在后面將看到，還可以使用漸變色或者圖案填充）。然后，只要調(diào)用context的fill函數(shù)，就可以讓canvas對當(dāng)前圖形中所有的閉合路徑內(nèi)部的像素點進(jìn)行填充。

    由于是先描邊后填充，因此填充會覆蓋一部分描邊路徑。示例中路徑的寬度是4像素，這個寬度是沿路徑線居中對齊的，而填充是把路徑輪廓內(nèi)部所有像素全部填充，所以會覆蓋描邊路徑的一半。如果希望看到完整的描邊路徑，可以在繪制路徑（調(diào)用context.stroke()之前填充（調(diào)用context.fill())。