---恢復內容開始---
在HTML5中新添加的元素，canvas 現在支持 IE9+的版本
注意：HTML5 <canvas> 元素用於圖形的繪制，通過腳本 (通常是JavaScript)來完成.
<canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。
在使用canvas之前應該給用戶說明必須是ie9+的版本，否則不支持。
繪制簡單的直線
1.先獲取畫布
var canvas = document.getElementById('canvas');
2.配置繪制的環境
var context = canvas.getContext('2d');
3.在繪制之前，加上
context.beginPath(); // 意思是開始繪制
4.設置起點
context.moveTo(10,10); // 這里的第一個參數是x軸，第二個參數是y軸
5.設置下一個點，
context.lineTo（x,y）; // 下個一個點坐標
6. 結束繪制
context.closePath();
context.stroke() ;
canvas 元素在繪制圖像是有兩種方法：
context.fill() // 填充
context.stroke(); // 繪制邊框
但是在繪制前，要先設置好它們的樣式
context.fillStyle//填充的樣式
例如：context.fillStyle = 'pink'; //填充的顏色為粉色
context.strokeStyle//邊框樣式
context.lineWidth = 10; // 設置線條的寬度 為10
canvas 元素在繪制圖像是有兩種路徑
A.context.beginPath() 開始繪制
B.context.closePath() 結束繪制
1、系統默認在繪制第一個路徑的開始點為beginPath.
2、如果畫完前面的路徑沒有重新指定beginPath，那么畫第其他路徑的時候會將前面最近指定的beginPath后的全部路徑重新繪制.
如果難理解，那么你只要記住每次畫路徑都在前后加context.beginPath() 和context.closePath()就行。
繪制矩形
canvas 的原點坐標為左上角。
context.strokeRect(100,100, 50,50);// x y width heigth 的參數 畫出來的是 空心矩形
context.fillRect(100,100,100,100); // 畫出來的 實心矩形
有繪制就有清空 context.clearRect(x,y,width,height) ;
// x:清除矩形起點橫坐標 y:清除矩形起點縱坐標 width:清除矩形長度 height:清除矩形高度
繪制圓
context.arc(250,250,100,0,Math.PI,true); // 有6個參數 Math.PI 是180度
第一個 ： 圓心的x軸坐標 第四個： 開始的角度（straAngle)
第二個 ： 圓心的y軸坐標 第五個： 結束的角度 （endAngle)
第三個 ： 半徑的長度 第六個： 是否是逆時針 true）為逆時針，(false)為順時針
context.arc(200,200,50,0,Math.PI*0.5,true);
context.stroke(); // 下面有圖片
線性漸變
var lg = context.createLinearGradient(x起始位置,y起始位置,x結束位置,y結束位置);
線性漸變顏色 lg.addColorStop(offset,color) // offset:設定的顏色離漸變結束點的偏移量(0~1) color:繪制時要使用的顏色
徑向漸變
var rg = context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
1. xStart:發散開始圓心x坐標 2. yStart:發散開始圓心y坐標 3. radiusStart:發散開始圓的半徑
4. xEnd:發散結束圓心的x坐標 5.yEnd:發散結束圓心的y坐標 6.radiusEnd:發散結束圓的半徑
徑向漸變顏色 rg.addColorStop(offset,color)
圖形的旋轉 rotate()
context.rotate(Math.PI/4); // 意思是坐標軸旋轉的度數
圖形的平移 translate()
context.translate(x,y); // x 軸的平移量 y 軸的平移量
圖形的縮放 scale()
context.scale(x,y) ； // x 軸按照x比例進行縮放 y軸按照y比例進行縮放
圖形的陰影 shadow()
context.shadowOffsetX = 5; // 陰影在 x 軸的偏移量
context.shadowOffsetY = 5; //陰影在 y 軸的偏移量
context.shadowColor = 'red'; // 設置陰影的顏色
context.shadowBlur = 100; // 模糊程度 （值越大越模糊）
圖形的組合 context.globalCompositeOperation=type
圖形組合就是兩個圖形相互疊加了圖形的表現形式,是后畫的覆蓋掉先畫的呢，還是相互重疊的部分不顯示等等，至於怎么顯示就取決於type的值了
type：
source-over（默認值）: 在原有圖形上繪制新圖形
destination-over: 在原有圖形下繪制新圖形
source-in: 顯示原有圖形和新圖形的交集，新圖形在上，所以顏色為新圖形的顏色
destination-in: 顯示原有圖形和新圖形的交集，原有圖形在上，所以顏色為原有圖形的顏色
source-out: 只顯示新圖形非交集部分
destination-out: 只顯示原有圖形非交集部分
source-atop: 顯示原有圖形和交集部分，新圖形在上，所以交集部分的顏色為新圖形的顏色
destination-atop: 顯示新圖形和交集部分，新圖形在下，所以交集部分的顏色為原有圖形的顏色
lighter: 原有圖形和新圖形都顯示，交集部分做顏色疊加
xor: 重疊飛部分不現實
copy: 只顯示新圖形
---恢復內容結束---