1.1. Canvas介紹
Html5新增标簽來定義圖形，比如圖表和圖像，您可以使用腳本(JS)來繪制圖形。
标簽隻是圖形容器，您必須使用(JavaScript)腳本來繪制圖形。 簡單了解：canvas标簽可以在網頁建立一個塊矩形區域，我們可以通過JS代碼在這個區域(畫布)中繪制圖形。
1.2. Canvas使用
下面代碼在網頁中建立了一個canvas标簽，畫布寬高為600px,400px。注意canvas不能使用style屬性設定寬高，style設定的隻是canvas标簽的大小，而非畫布本身的大小。
你的浏覽器不支援Canvas，請更新你的浏覽器。
預設情況下這個畫布裡面什麼東西都沒有，我們可以給canvas設定一個邊框，便于我們檢視。
你的浏覽器不支援Canvas，請更新你的浏覽器。
Canvas标簽添加到頁面中畫布裡面沒有任何東西，相當于我們準備好了一張白紙。
1.3. 繪制圖形
Canvas标簽本身并不能繪制圖形，繪制圖檔的工作需要使用 JavaScript來完成。
是以我們需要擷取canvas對象，然後通過這個對象上面的方法完成繪制:
1.3.1. 繪制直線
cx.strokeStyle="red";//畫筆的顔色
cx.lineWidth=2;//線框
cx.moveTo(500,500); //設定線條的起始位置
cx.lineTo(100, 100); //給路徑一個終點
cx.stroke();//開始繪制
1.3.2. 繪制矩形
cx.fillStyle = "blue"; //填充色為藍色
cx.strokeStyle ="red"; //描邊為紅色
cx.lineWidth = 2;
cx.fillRect(10, 10, 400, 400); //繪制矩形 fillRect(起點x,起點y,寬度w,高度h);
cx.strokeRect(10, 10, 400, 400); //繪制邊框 strokeRect(x,y,w,h);
1.3.3. 繪制圓形
cx.fillStyle = "blue"; //填充色為藍色
cx.strokeStyle = "red"; //描邊為紅色
cx.lineWidth = 2;
//繪制圓形 arc(原點x,原點y,半徑,起始弧度,結束的弧度,是否是逆時針)
cx.arc(200, 200, 150, 0, Math.PI*2, true); // π
cx.fill(); //填充顔色
cx.stroke(); //繪制
//清除畫圖
cx.clearRct(x,y,width,height);
1.3.4 加載圖檔素材
//加載圖檔
var bb=document.querySelector("#bb");
//用法一:
// cx.drawImage(bb,50,50)//把畫加載到畫布指定的位置
//用法二：
cx.drawImage(bb,50,50,120,150);//把畫加載到畫布指定的位置,并制定寬高
//用法三：
//cx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
//cx.drawImage(bb,0,280,590,400,150,600,150,150)
小練習：
body{
background: #ccc;
}
#mycanvas{
background: #fff;
display: block;
margin: auto;
}
#bb{
display: none;
}
效果：
