首先canvas作為html5新出現的標籤，也像其他所有dom物件一樣有他自己本身的屬性、方法和事件，其中就有繪圖的方法，然後用我們可以用js呼叫它來進行繪圖  語法 例：

<canvas id="myCanvas" width="400" height="400"></canvas>

可以看到canvas元素自身也有兩個屬性 width 和height 此外也有其他的html的一些主要屬性 比如  class  id   name 等

在這裡 JavaScript就是使用這裡建立的canvas的id來表示要在上面繪畫的畫布。 方法如下：

var cvs = document.getElementById("myCanvas");
//IE 6 7 8 不支援 <canvas>標籤
 

每個畫布都必須有一個context（上下文）的定義。一般情況下官方規範只承認一種2D環境；

var ctx = cvs.getContext("2d");

之後我們就可以進行繪畫了

Canvas的座標

分為x y  （從0開始  想右向下 x y 都為正數  不能為負   負的話 超出畫布 就不會顯示了）

一些相關語法

ctx.beginPath() ：開始一個路徑

ctx.moveTo(x,y)： 路徑移到畫布中的指定點 , 即起點

ctx.lineTo(x,y) ：新增一個新點，畫線 ......

ctx.closePath() ：關閉繪製路徑

ctx.fillStyle：用來設定填充顏色

ctx.fill() ：填充已定義好的路徑

ctx.lineWidth：畫線的寬度

ctx.strokeStyle：用來設定描邊顏色

ctx.stroke() ：繪製已定義好的路徑

矩形繪製

rect(x,y,w,h)： x、y為起始座標，w、h為矩形的寬、高 支援這麼寫： ctx.fillRect(x,y,w,h)   及   ctx.strokeRect(x,y,w,h)

圓形繪製

arc(x,y,r,sa,ea,true/false)： x、y為圓心座標，r為半徑， sa、ea分別為起始角度和結束角度， true是逆時針畫圓，false是順時針畫圓； 360度角即2PI弧度，1度就是2PI/360=PI/180弧度， 90度就是2PI/360*90=PI/2弧度(其他的角度自行計算)

繪製文字

fillText(text,x,y,maxWidth): 填充繪製 text表示文字      x、y為座標 maxWidth可選，為文字最大寬度，防止文字溢位 strokeText(text,x,y,maxWidth): 描邊繪製 text表示文字      x、y為座標 maxWidth可選，為文字最大寬度，防止文字溢位；

常用屬性設定： font 文字內容的當前字型屬性 示例: ctx.font = 'bold 60px 微軟雅黑';（順序不能改） textAlign 文字內容的當前對齊方式（一般不需要） 示例: ctx.textAlign="left";   ctx.textAlign="right"; （左右是根據你定的xy座標來定的-左-最左邊在座標；右-最右邊在座標   ↓上下文字基線一樣性質） textBaseline 繪製文字時使用的當前文字基線 示例: ctx.textBaseline="middle"; ctx.textBaseline="top";  ctx.textBaseline="bottom";

*號為重點：    

1、系統預設在繪製第一個路徑的開始點為beginPath    

*2、如果畫完前面的路徑沒有重新指定beginPath， 那麼畫第其他路徑的時候會將前面最近指定的beginPath後的全部路徑重新繪製    

3、每次呼叫context.fill（）的時候會自動把當次繪製的路徑的開始點和 結束點相連，接著填充封閉的部分   *記住每次畫路徑都在前後加context.beginPath()    和context.closePath()就行

清除畫布：

 ctx.clearRect(x,y,width,height):

x : 清除起點橫座標

y : 清除起點縱座標

width : 清除長度

height : 清除高度

清除畫布： ctx.clearRect(0,0,cvs.width,cvs.height);