canvas元素 可被用來通過腳本（通常是JavaScript）繪製圖形。比如,它可以被用來繪製圖形,製作圖片集合,甚至用來實現動畫效果。你可以(也應該)在元素標簽內寫入可提供替代的的代碼內容，這些內…容將會在在舊的、不支持canvas元素的瀏覽器或是禁用了JavaScript的瀏覽器內渲染並展現。 ...
canvas元素 可被用來通過腳本（通常是JavaScript）繪製圖形。比如,它可以被用來繪製圖形,製作圖片集合,甚至用來實現動畫效果。你可以(也應該)在元素標簽內寫入可提供替代的的代碼內容，這些內…容將會在在舊的、不支持canvas元素的瀏覽器或是禁用了JavaScript的瀏覽器內渲染並展現。
canvas 看起來和 img 元素很相像，唯一的不同就是它並沒有 src 和 alt 屬性。實際上， canvas 標簽只有兩個屬性 —— width 和 height 。這些都是可選的，並且同樣利用…。這些都是可選的，並且同樣利用 DOM properties 來設置。當沒有設置寬度和高度的時候，canvas會初始化寬度為300像素和高度為150像素。該元素可以使用 CSS 來定義大小，但在繪製時圖像會伸縮以適應它的框架尺寸
以上是MDN中關於Canvas的一些簡單介紹，我不知道Canvas有多少人接觸過，我自己也接觸沒有多久，不做游戲和數據方面的話，用的真的不多，但是知道一些還是有必要的，下麵是我自己整理的一些常用的API，其實在MDN上都有，只是比較凌亂，所以自己把這些整理在了一起，沒接觸過的可能看不太懂，這些都是Canvas的命令，但是有些會忘記，就整理了起來，如果需要，可以拿去，但是最好註明出處
- 標簽
<canvas></canvas> - 預設寬300，高150，不用用Css設置寬高
- 獲取方法var ctx = cas.getcontext("2d"),該方法返回CanvasRenderingContext2D的類型對象，利用該方法繪圖
- 基本繪圖命令
- 設置開始繪圖位置：ctx.moveTo(x,y);
- 設置直線到的位置：ctx.lineTo(x,y);
- 描邊繪製：ctx.stroke();
- 填充繪製：ctx.fill();
- 自動閉合路徑：ctx.closePath();
- 開啟新的繪製：ctx.beginPath();
- 設置描邊顏色：ctx.strokeStyle;
- 設置填充顏色：ctx.fillStyle;
- 保存開始設置：ctx.save();
- 重置到保存樣式：ctx.restore();
- 線型相關屬性
- 設置線寬：ctx.linewidth;(數字即可)
- 設置線末端類型：ctx.lineCap;('butt' 表示兩端使用方形結束,'round' 表示兩端使用圓角結束,'square' 表示突出的圓角結束)
- 設置相交線的拐點：ctx.lineJoin;('round' 使用圓角連接,'bevel' 使用平切連接,'miter' 使用直角轉)
- 獲得線段樣式數組：ctx.getLineDash();
- 設置線段樣式：ctx.setLineDash();(數組形式設置)
- 繪製線段偏移量：ctx.lineDashOffset;
- 矩形繪圖命令
- 繪製矩形：ctx.rect;(因為還需要fill或者stroke才可以看見效果，所以直接使用下麵兩種)
- 繪製邊框矩形：ctx.strokeRect(x,y,width,height);
- 繪製填充矩形：ctx.fillRect(x,y,width,height);
- 清除矩形區域：ctx.clearRect(x,y,width,height);
- 圓弧繪製命令
- 繪製圓弧：ctx.arc(x,y,r,startAngle,endAngle,anticlockwise);參數 anticlockwise 表示是否採用預設的正向角度, 如果傳入 true 表示逆指針為正. 該參數可選
- 繪製文本命令
- 繪製填充文字：ctx.fillText(text,x,y);
- 繪製空心文字：ctx.strokeText(text,x,y);
- 設置字體樣式：ctx.font;
- 設置字體水平位置：ctx.textAlign;(start(預設), end, left, right, center)
- 設置字體垂直位置：ctx.textBaseline;(top, middle, bottom, hanging, alphabetic, ideographic)
- 繪製圖片命令
- 繪製圖片(3參數)：ctx.drawImage(img,casx,casy);
- 繪製圖片(5參數)：ctx.drawImage(img,casx,casy,width,height);
- 繪製圖片(9參數)：ctx.drawImage(img,x,y,width,height,casx,casy,caswidth,casheight);
- 變換命令
- 平移變換：ctx.translate(x,y);(x 表示水平移動, 正數向右, 負數向左;y 表示垂直移動, 正數向下, 負數向上)
- 旋轉變化：ctx.ratate(radian);(參數是弧度, 表示旋轉的方式. 正數表示順時針旋轉, 負數表示逆時針旋轉.)
- 縮放變化：ctx.scale(x,y);(x控制水平縮放倍率,y控制水平縮放倍率,傳1不做縮放)
