canvas即畫布，是HTML5中新加的一個元素，可以制作出豐富的網頁內容【canvas API】
通過與js來配合使用，如下所示：
HTML5：
? ? <canvas id="myCanvas" width="300px" height="300px" style="display:block; border:1px solid black; margin: auto"></canvas> //創建畫布（200*400）
JS：
? ? ?var c = document.getElementById("myCanvas"); //找到畫布
? ? ?var ctx = c.getContext("2d"); //創建畫筆
? ? ?ctx.fillStyle = "#008"; //設置畫筆顏色
1、繪制圖像：
? ? ?ctx.fillRect(50,50,100,150); //繪制圖形
2、繪制路徑：
? ? ?ctx.moveTo(10,10); //從坐標(10,10)的地方開始
? ? ?ctx.lineTo(100,200); //在坐標(100,200)的地方停止
? ? ?ctx.stroke(); //開始畫
eg：畫圓
? ? ?ctx.beginPath();
? ? ?ctx.arc(70,90,30,0,Math.PI*2);?
? ? ?ctx.closePath();
? ? ?ctx.fill();
3、繪制文本：
? ? ctx.font="30px Georgia Italic"; //設置字體
? ? ctx.fillText("hello world",80,100); //設置文本及其起始位置
4、繪制漸變效果：
（1）線性變化：【詳見】
? ? var clor=ctx.createLinearGradient(150,0,0,0);
? ? clor.addColorStop(0,"#008");
? ? clor.addColorStop(1,"#FFF");
? ? ctx.fillStyle=clor;
? ? ctx.fillRect(50,100,200,80);
（2）圓形漸變：【詳見】
? ? var clor=ctx.createRadialGradient(150,150,50,150,150,100);
? ? clor.addColorStop(0,"#008");
? ? clor.addColorStop(1,"#800");
? ? ctx.fillStyle=clor;
? ? ctx.fillRect(50,50,200,200);
5、繪制圖片：
? ? ?var img = new Image();
? ? ?img.src = "http://img.zcool.cn/community/0130f1565197fe6ac7251c94bd1b25.jpg";
? ? ?img.onload = function() {
? ? ? ? ? ctx.save(); //保存現場
? ? ? ? ? ctx.scale(0.3,0.3); //圖片縮放
? ? ? ? ? ctx.drawImage(img,50,150); //繪制圖片
? ? ? ? ? ctx.restore; //恢復現場
? ? ?}
注：
? ? ? ?1、canvas左上角起點坐標為(0,0)；
? ? ? ?2、fillRect("相對畫布的起始位置X坐標","相對畫布的起始位置Y坐標","繪制圖形的寬","繪制圖形的高")；
? ? ? 3、畫圓時若使用ctx.stroke()，畫出的園則不填充；
? ? ? 4、繪制文本時可使用ctx.strokeText()，繪制空心文字；
