1. 在canvas標簽中給出長寬（不帶單位）：<canvas width="600" height="600"></canvas>

　或者在js中設置長寬：canvas.width = 600; canvas.height = 600;

　註意：canvas是行內塊元素，用CSS設置的width和height像素值是canvas在頁面渲染出來的寬高，而用js設置或者在標簽中直接給出的則是canvas的分辨率，二者有本質的區別。
　　　　canvas元素的使用與普通的html元素並不相同，它有一個默認尺寸300*150，在css中設置寬高只能改變canvas的顯示寬高，而並沒有改變畫布繪制時的尺寸，所以要為canvas設置繪制的尺寸，必須寫在元素標簽上或用JS設置。

2. 瀏覽器兼容時，不會顯示canvas標簽內的內容；不兼容時才會顯示。

　　<canvas width="600" height="600">您的瀏覽器不支持canvas標簽</canvas>

3. var canvas = document.getElementById("canvas"); // 獲取canvas標簽
var context = canvas.getContext("2d"); // 獲取2d上下文環境

context.beginPath();//可以開始繪制

context.moveTo(100,100); //畫筆移動到(100,100);
context.lineTo(150,200); //創建一條從(100,100)到(150,200)的路徑
context.fillStyle = "#ccc"; //填充顏色為#ccc
context.strokeStyle = "#fff"; //進行描邊
context.lineWidth = 5;
context.fill();//進行填充
context.stroke();//進行描邊

context.closePath();//關閉當前路徑 （基於狀態）

關於closePath():當當前路徑不是封閉路徑時，使用closePath會自動將當前路徑的首尾連接起來

context.fillRect(x,y,w,h);
context.clearRect(50, 30, 110, 35); //清除畫布上的內容

(50,30)為矩形起點，110.35為矩形長寬

想繪制多條不封閉路徑圖形，在每次繪制新路徑時使用beginPath即可
4. 繪制弧線
　context.arc(x,y,r,startingAngle,endingAngle,anticlockwise = false);
參數分別為：圓心坐標，半徑，起始角度，結束角度，時鐘方向（false為順時針、true為逆時針）
三點鐘方向為0pi,六點鐘方向為0.5pi,九點鐘為1.0pi,12點鐘為1.5pi
例如：context.arc(300,300,100,0,Math.PI*1.5,false);

5. 繪制矩形

　context.fillRect(x,y,w,h);
context.strokeRect(50, 30, 110, 35)
context.clearRect(50, 30, 110, 35); //清除畫布上的內容

6. 繪制虛線

　context.setLineDash([a,b]);//a為虛線線段長度,b為虛線線段間隔長度

7. 取得canvas元素相對於瀏覽器窗口的位置

　element.getBoundingClientRect()方法返回元素的大小及其相對於視口的位置

8. 繪制圖片

　cvs.drawImage(image.x,y,width,height);
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

image可以是元素或是image對象，但不能是路徑
傳遞給 drawImage() 方法的圖像必須是 Image 對象或 Canvas 元素

canvas常用api