簡介
標籤是 HTML5 中新定義的標籤，它是一個畫布標籤，只是作爲一個圖形容器，必須使用腳本來繪製圖形。
Canvas基本使用
<canvas>標籤
<canvas>只有兩個可選屬性：width, height, 如果不給寬高設定初始值時，則默認width爲300，height爲150，不建議使用CSS樣式表來給其設置寬高- 替換內容
IE9版本以前的瀏覽器不支持<canvas>標籤，則可在標籤中間寫上文字可作爲文本替換，在支持<canvas>標籤的瀏覽器中，則不會顯示替換文本內容。 - 渲染上下文
<canvas>會創建一個固定大小的畫布，會更公開一個或者是多個畫筆工具，也就是渲染上下文用來繪製和處理展示的內容。
var canvas = document.getElementById('canvas');
if(!canvas.getContext) return; //檢測支持性
var cxt = canvas.getContent('2d');
繪製形狀
- 柵格和座標空間
<canvas>元素默認被網格所覆蓋。通常來說網格中的一個單元相當於canvas元素中的一像素。柵格的起點爲左上角（座標（0,0）。所有元素的位置都相對於原點來定位。 - 繪製矩形
<canvas>僅支持繪製一種原生的圖形，矩形。
提供了三種繪製方案
- 填充矩形：
fillRect(x, y, width, height) - 邊框矩形（非實心）：
strokeRect(x, y, width, height) - 清除指定矩形區域：
clearReact(x, y, width, height)
其中，（x,y）是指矩形左上角的座標，相當於是矩形的原點
width, height是指矩形的寬高
- 繪製路徑
圖形的基本元素是路徑。
路徑是通過不同顏色和寬度的線段或者曲線相連形成的不同形狀的點的集合。
一個路徑，甚至一個子路徑，都是閉合的。
-
繪製路徑的步驟：
1） 創建路徑的起點
2） 調用繪製方法來繪製路徑
3） 把路徑封閉
4） 路徑生成，即可描邊和填充路徑以渲染圖形。 -
繪製路徑的方法：
beginPath()：創建一條新路徑，圖形繪製命令被指向到路徑上來生成路徑。
moveTo(x, y): 把畫筆移動到指定目標，設置路徑的起始座標
lineTo(x, y): 繪製一條從當前位置到指定座標的直線
closePath(): 閉合路徑，圖形繪製命令重新指向上下文。
stroke(): 通過線條來繪製圖形輪廓
fill(): 填充內容區域來生成實心圖形
注意：stroke不會自動閉合路徑，但是fill是可以自動閉合路徑的。 -
實例：繪製三角形
var canvas = document.getElementById('canvas');
if(!canvas.getContext) return; //檢測支持性
var cxt = canvas.getContent('2d');
cxt.beginPath();
cxt.moveTo(50, 50);
cxt.lineTo(150, 50);
cxt.lintTo(150, 150);
cxt.closePath();
cxt.stroke();
- 繪製圓弧
-
arc(x, y, r, startAngle, endAngle, anticlockwise)
以（x, y）爲圓心，以r爲半徑，從startAngle弧度開始到endAngle弧度結束，anticlockwise是布爾值，true表示逆時針，false表示順時針（默認順時針）
注意：1. 這裏的度數都是弧度； 2. 0弧度是指的x軸正方形。 -
arcTo(x1, y1, x2, y2, radius)：繪製的圓弧就是兩條直線相切的與圓弧
-
繪製貝塞爾曲線
貝塞爾曲線是應用二維圖形應用程序的數學曲線。
一般的矢量圖形軟件通過它來精確畫出曲線貝茲曲線由線段與節點組成，節點是可拖動的支點，線段可伸縮。
一次貝塞爾曲線是一條直線-
繪製二次貝塞爾曲線
quaddratixCurveTo(cp1x, cp2y, x, y)
cp1x, cp1y: 控制點的座標
x, y: 結束點的座標 -
繪製三次貝塞爾曲線
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
cp1x, cp1y: 控制點1的座標
cp2x, cp2y: 控制點2的座標
x, y: 結束點的座標
-
-
添加樣式和顏色
給圖形填充顏色：
fillStyle = color
給圖形輪廓填充顏色：strokeStyle = color注意：爲圖形設置不同的顏色需要重新設置
fillStyle和strokeStyle透明度：
globalAlpha = transparencyValue
這個屬性會影響到Canvas上所有圖形透明度，有效值是從0.0到1.0
如果要設置單個圖形的透明度，可以使用rgba()線寬：
lineWidth = value
只能爲正值，默認爲1.0線段末端樣式：
lineCap = butt/round/squre
butt：線段末端以方形結束
round：線段末端以圓形結束
square：線段末端以方形結束，但是增加了一個寬度和線段相同，高度是線段厚度一半的矩形區域。設置線條與線條之間接合處樣式：
lineJoin = round/bevel/miter(默認)
round：通過填充一個額外的，圓心在相連部分末端的扇形，繪製拐角的形狀。 圓角的半徑是線段的寬度。bevel：在相連部分的末端填充一個額外的以三角形爲底的區域， 每個部分都有各自獨立的矩形拐角。miter(默認)：通過延伸相連部分的外邊緣，使其相交於一點，形成一個額外的菱形區域。虛線：使用
setLineDash方法和lineDashOffset屬性來設置
setLineDash([x, y]): 接受一個數組，來制定線段與間隙之間的交替，x是實線長度，y是間隔長度
lineDashOffset：該屬性設置起始偏移量.
getLineDash():返回一個包含當前虛線樣式，長度爲非負偶數的數組。繪製文本
fillText(text, x,y [, maxWidth])：在指定的(x,y)位置填充指定的文本，繪製的最大寬度是可選的。strokeText(text, x, y [, maxWidth])：在指定的(x,y)位置繪製文本邊框，繪製的最大寬度是可選的.font = "font-size font-family"：與CSS font屬性語法相同textAlign = start(默認)/end/left/right/center：文本對齊項textBaseline = top/hanging/middle/alphabetic(默認)/ideographic/bottom：基線對齊選項direction = inherit(默認)/ltr/rtl：文本方向
繪製圖片
//創建一個img元素，並且設置其源地址 var img = new Image(); img.src = 'xxx.png'; //保證img渲染完成後在進行drawImage img.onload = function() { ctx.drawImage(img, 0, 0); }drawImage(image, x, y, width, height)： 其中width和height是指用來當canvas 畫入多少時縮放的大小drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：切片
後面8個參數分別爲：
前4個是定義圖像源的切片位置和大小，後4個則是定義切片的目標顯示位置和大小。
-
狀態的保存和恢復
save 和 restore 方法是用來保存和恢復 canvas 狀態的, canvas的狀態存儲是保存在棧中的。
當save()方法被調用後，當前狀態就會被推送到棧中保存。其中狀態表示爲：
- 當前應用的變形（移動，縮放，和旋轉）
- 圖形的樣式設置
- 剪裁的路徑
restore()：上一個保存狀態從棧中彈出，所有設定恢復。
- 變形
translate(x, y)：移動canvas的原點到指定位置，其中x是左右偏移量，y是上下偏移量。
rotate(angle)：旋轉座標軸，按照順時針的方向，以弧度爲單位的值。
scale(x, y)：增減canvas中的像素數目，對形狀和位圖進行縮小或放大。其中，x,y分別是橫軸和縱軸的縮放值，它們都必須是正值。值比 1.0 小表示縮 小，比 1.0 大則表示放大，值爲 1.0 時什麼效果都沒有。
transform(a, b, c, d, e, f)：變形矩陣
- 合成
globalCompositeOperation = source-over(default)/source-in/source-out/source-atop/destination-over/destination-in/destination-out/destination-atop/lighter/darken/lighten/xor/copy
source-over(default)：這是默認設置，新圖像會覆蓋在原有圖像。
source-in：僅僅會出現新圖像與原來圖像重疊的部分，其他區域都變成透明的。(包括其他的老圖像區域也會透明)
source-out：僅僅顯示新圖像與老圖像沒有重疊的部分，其餘部分全部透明。(老圖像也不顯示)
source-atop：新圖像僅僅顯示與老圖像重疊區域。老圖像仍然可以顯示。
destination-over：新圖像會在老圖像的下面。
destination-in：僅僅新老圖像重疊部分的老圖像被顯示，其他區域全部透明。
destination-out：僅僅老圖像與新圖像沒有重疊的部分。 注意顯示的是老圖像的部分區域。
destination-atop：老圖像僅僅僅僅顯示重疊部分，新圖像會顯示在老圖像的下面。
lighter：新老圖像都顯示，但是重疊區域的顏色做加處理
darken：保留重疊部分最黑的像素。(每個顏色位進行比較，得到最小的)
lighten：保證重疊部分最量的像素。(每個顏色位進行比較，得到最大的)
xor：重疊部分會變成透明
copy：只有新圖像會被保留，其餘的全部被清除(邊透明)
-
裁剪路徑
clip()：把已經創建的路徑轉換成裁剪路徑。裁剪路徑的作用是遮罩。只顯示裁剪路徑內的區域，裁剪路徑外的區域會被隱藏。注意：clip()只能遮罩在這個方法調用之後繪製的圖像，如果是clip()方法調用之前繪製的圖像，則無法實現遮罩。
-
動畫
動畫的基本步驟：
-
清空canvas：再繪製每一幀動畫之前，需要清空所有。清空所有最簡單的做法就是clearRect()方法
-
保存canvas狀態：如果在繪製的過程中會更改canvas的狀態(顏色、移動了座標原點等),又在繪製每一幀時都是原始狀態的話，則最好保存下canvas的狀態
-
繪製動畫圖形：這一步纔是真正的繪製動畫幀
-
恢復canvas狀態：如果你前面保存了canvas狀態，則應該在繪製完成一幀之後恢復canvas狀態。
控制動畫方法：
setInterval()setTimeout()requestAnimationFrame()