1、canvas基礎知識
canvas元素是HTML5中新增的一個重要的元素，專門用來繪制圖形，不過canvas本身不具備畫圖的能力，在頁面中放置了canvas元素，就相當於在頁面中放置了一塊矩形的“畫布”，我們可以利用js腳本在“畫布”上繪制圖形。
1.1canvas元素
在利用canvas繪制圖形之前，我們首先需要在頁面中放置一個canvas元素，如下代碼：
<canvas id="mycanvas" width="400" height="400">您的瀏覽器out了</canvas>
說明：（1）放置canvas元素首先需要指定ID，widht，height三個屬性，其中寬度跟高度只能通過這種方式指定，不可以通過css樣式指定
（2）canvas標簽里面的內容只有當瀏覽器不兼容canvas時，才會顯示，當瀏覽器兼容canvas時，該內容將不顯示，只顯示繪制的內容
1.2畫圖環境
Canvas.getContext(contextID)
說明：（1）contextID 指定了您想要在畫布上繪制的類型。當前唯一的合法值是 "2d"，它指定了二維繪圖。
（2）getContext() 方法會返回一個對象，這個對象給我們封裝了很多的繪圖方法和屬性
1.3顏色的表示方式
- 顏色名稱:"red" "green" "blue"
- 十六進制顏色值: "#FFFFFF"
- 三色值：rgb(1-255,1-255,1-255)
- 四色值：rgba(1-255,1-255,1-255,透明度)
1.4坐標系統
canvas坐標系是一個二維的平面。原點坐標（0,0）在canvas畫布的左上角位置上，沿着水平向右方向是x軸正方向，垂直方向為y軸正方向
2、使用canvas繪制矩形
2.1 矩形API
- rect() 創建矩形
- fillRect() 繪制‘被填充’矩形
- strokeRect 繪制無填充矩形
參數說明：
- x:矩形起點的橫坐標
- y:矩形起點的縱坐標
- width:矩形的長度
- height:矩形的寬度
2.2圖形修飾
2.2.1顏色樣式，陰影的方法和屬性
部分方法屬性使用說明：
-
createLinearGradient(xStart,yStart,xEnd,yEnd)：該方法使用4個參數，xStart為漸變起始點的橫坐標，yStart為漸變起始點的縱坐標，xEnd為漸變結束點的橫坐標，yEnd為漸變結束點的縱坐標
-
addColorStop(offset,color):在使用createLinearGradient方法創建了一個使用兩個坐標點的對象之后，還需要使用addColorStop方法對漸變的顏色進行設定，offset為所設定的顏色離開漸變起始點的偏移量，該參數是一個范圍在0-1之間的浮點值i，漸變起始點的偏移量為0，漸變結束點的偏移量為1，下面用一個圖形來說明這個參數（該圖示是一個由藍色變為白色再由白色漸變到紅色的過程）
2.3開始繪制矩形
2.3.1繪制一個填充單一背景色的矩形
step1:在頁面中放置一個canvas元素
<canvas id="mycanvas" width="400" height="400">您的瀏覽器out了</canvas>
step2:取得canvas元素
var mycanvas=document.getElementById('mycanvas');
step3:獲取繪圖環境
var context=canvas.getContext('2d');
step4:設定繪圖樣式
用canvas繪制圖形的時候，有兩種方式——填充（fill）與繪制邊框(stroke)，填充是指填滿圖形內部，繪制邊框是指不填滿圖形內部只繪制圖形的外框，canvas元素結合使用者兩種方式來繪制圖形
context.fillStyle='red'; //fillStyle設置填充顏色 context.strokeStyle='blue'; //strokeStyle設置邊框顏色 context.lineWidth=3; //lineWidth設置圖形邊框的寬度
step5:開始繪制矩形
canvas分別使用fillRect方法與strokeRect方法來填充矩形和繪制矩形的邊框
context.fillRect(50,50,100,100);
context.strokeRect(50,50,100,100);
效果預覽：
2.3.2繪制一個線性漸變的矩形
step1:在該實例中，我們將直接從繪制矩形開始講,設置矩形樣式
context.strokeStyle='blue'; //strokeStyle設置邊框顏色 context.lineWidth=3; //lineWidth設置圖形邊框的寬度 var oColor=context.createLinearGradient(0,0,150,0); //創建一個線性漸變對象 oColor.addColorStop(0,'red'); //漸變由紅色開始 oColor.addColorStop(1,"white"); //過渡到白色 context.fillStyle=oColor; //將矩形的樣式設置成線性漸變
step2:開始繪制矩形
context.strokeRect(50,50,100,100);
context.fillRect(50,50,100,100);
step3：完整代碼
var mycanvas=document.getElementById('mycanvas'); //獲取canvas對象
var context=mycanvas.getContext('2d'); //getContext會返回一個對象，這個對象封裝了很多繪圖的屬性和方法 context.strokeStyle='blue'; //strokeStyle設置邊框顏色 context.lineWidth=3; //lineWidth設置圖形邊框的寬度 var oColor=context.createLinearGradient(0,0,150,0); //創建一個線性漸變對象 oColor.addColorStop(0,'red'); //漸變由紅色開始 oColor.addColorStop(1,"white"); //過渡到白色 context.fillStyle=oColor; //將矩形的樣式設置成線性漸變 context.strokeRect(50,50,100,100); context.fillRect(50,50,100,100);
step4:效果預覽
2.3.3繪制一個帶陰影的矩形
step1:設置矩形樣式以及陰影樣式
context.fillStyle='red'; //設置矩形的填充顏色 context.shadowBlur=20; //設置陰影的模糊級別 context.shadowColor='black'; //設置陰影的顏色
step2:開始繪制矩形
context.fillRect(50,50,100,100);
step3:完整代碼
var mycanvas=document.getElementById('mycanvas'); //獲取canvas對象 var context=mycanvas.getContext('2d'); //getContext會返回一個對象，這個對象封裝了很多繪圖的屬性和方法 context.fillStyle='red'; //設置矩形的填充顏色 context.shadowBlur=20; //設置陰影的模糊級別 context.shadowColor='black'; //設置陰影的顏色 context.fillRect(50,50,100,100);
效果預覽：
