小例中用到了畫布canvas的畫矩形，畫圓或弧，畫線，畫文字，顏色漸變。
其全部顏色 字型 圖形都是通過js在canvas上繪製形成，總結了幾個context物件的方法如下：
1.畫矩形：fillrect(x, y, width, height) //矩形左上角點x座標，矩形左上角點y座標, 矩形寬度，矩形高度
2.畫圓： arc(x, y, radius, 0, 2*math.pi, false); //圓心x座標,圓心y座標,圓半徑,開始弧度,結束弧度,是否逆時針繪製
3.畫線： beginpath(); //重置路徑起點
moveto(80,30); //筆觸移動至點（x,y）
lineto(180,30); //定義從當前點到點（x,y）的路徑
context.closepath();//定義從當前點到路徑起點的路徑 結束本個路徑定義
fill(); //填充路徑
4.畫文字：filltext("法國",65,100,560); //文字內容，起點x座標，起點y座標，文字總共最大寬度
5.定義漸變可用於矩形或文字：
createlineargradient(180,90,canvas.width,116);
//漸變開始點的 x 座標，漸變開始點的y座標, 漸變結束點的x座標, 漸變結束點的y座標
6.清除畫布某部分的方法：clearrect(x,y,width,height) //要清除的
矩形左上角點x座標，要清除的
矩形左上角
點y座標, 要清除的矩形寬度，要清除的矩形高度 (清除即清除掉對應部分所畫之物)
1.效果圖：
HTML5邊玩邊學（1） 畫布
一 標籤 html5 引入了乙個新的 標籤，這個標籤所代表的區域就好象一塊畫布，你的所有圖形繪製最後都要在這塊畫布上呈現。有了這個標籤，瀏覽器的圖形表現力被極大的提公升，flash 和 silverlight 有沒有感到威脅呢?標籤的用法非常簡單，如下 code highlighting produ...
HTML5邊玩邊學（1） 畫布
一 標籤 html5 引入了乙個新的 標籤，這個標籤所代表的區域就好象一塊畫布，你的所有圖形繪製最後都要在這塊畫布上呈現。有了這個標籤，瀏覽器的圖形表現力被極大的提公升，flash 和 silverlight 有沒有感到威脅呢?google聲稱chrome7瀏覽器將提速60倍 標籤的用法非常簡單，如...
HTML5新增畫布元素canvas
canvas元素是乙個正常的html元素，相當於在頁面插入乙個畫布。在標記中設定寬 高屬性，在調整寬 高屬性後裡面的內容不會縮放。但是在css中指定這些屬性，在縮放畫布後，裡面內容也會縮放。預設情況下畫布是透明的，除非你在畫布上繪製了內容，否則是看不到它的。如果你想我證明畫布確實存在，就能看到乙個黑...