注意：
1.不要用CSS控制它的寬和高,會走出圖片拉伸；
2.重新設置canvas標籤的寬高屬性會讓畫布擦除所有的內容；
3.可以給canvas畫布設置背景色。
瀏覽器不兼容處理：
1.ie9以上才支持canvas,其他chrome、ff、蘋果瀏覽器等都支持；
2.只要瀏覽器兼容canvas，那麼就會支持絕大部分api(個別最新api除外)；
3.移動端的兼容情況非常理想，基本上隨便使用；
4.2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持。
5.瀏覽器不兼容，可以使用flash等手段進行降級。
Canvas自身無法繪製任何內容。Canvas的繪圖是使用JavaScript操作的，Context對象就是JavaScript操作Canvas的接口。使用[CanvasElement].getContext(‘2d’)來獲取2D繪圖上下文。
基本的繪製路徑：
canvas座標系，從最左上角0,0開始。x向右增大， y向下增大
設置繪製起點(moveTo)
語法：ctx.moveTo(x, y);
解釋：設置上下文繪製路徑的起點。相當於移動畫筆到某個位置；
參數：x,y 都是相對於 canvas盒子的最左上角；
注意：繪製線段前必須先設置起點，不然繪製無效。
繪製直線：
語法：ctx.lineTo(x, y);
解釋：從x,y的位置繪製一條直線到起點或者上一個線頭點；
參數：x,y
線頭點座標。
路徑開始和閉合：
開始路徑：ctx.beginPath();
閉合路徑：ctx.closePath();
解釋：如果複雜路徑繪製，必須使用路徑開始和結束。閉合路徑會自動把最後的線頭和開始的線頭連在一起；
beginPath: 核心的作用是將不同繪製的形狀進行隔離，
*ctx.fillText() 在畫布上繪製“被填充的”文本
* ctx.strokeText() 在畫布上繪製文本（無填充）
* ctx.measureText() 返回包含指定文本寬度的對象
* 單詞：measure 測量；估量；權衡
ctx.moveTo( 300, 300 );ctx.fillStyle = "purple"; //設置填充顏色爲紫色
ctx.font = '20px "微軟雅黑"'; //設置字體
ctx.textBaseline = "bottom"; //設置字體底線對齊繪製基線
ctx.textAlign = "left"; //設置字體對齊的方式
//ctx.strokeText( "left", 450, 400 ); ctx.fillText( "Top-g", 100, 300 ); //填充文字繪製圖片（drawImage）：
基本繪製圖片的方式：
context.drawImage(img,x,y); 參數說明： x,y 繪製圖片左上角的座標， img是繪製圖片的dom對象。在畫布上繪製圖像，並規定圖像的寬度和高度：context.drawImage(img,x,y,width,height);
如果指定寬高，最好成比例，不然圖片會被拉伸</em>
等比公式： toH = Height * toW / Width; //等比設置高 = 原高度 * 設置寬/ 原寬度;
圖片裁剪，並在畫布上定位被剪切的部分：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)；
參數說明：sx,sy 裁剪的左上角座標，
swidth：裁剪圖片的高度。 sheight:裁剪的高度（其他同上）
用JavaScript創建img對象：
第一種方式： var img = document.getElementById("imgId");第二種方式：var img = new Image();//這個就是 img標籤的dom對象
img.src = "imgs/arc.gif";img.alt = "文本信息";
img.onload = function() {//圖片加載完成後，執行此方法}