1.canvas基礎
<canvas id="canvas" width="400" height="300" />
注意：canvas通過css來修改長寬的話會影響視覺效果，它只認width屬性和height屬性
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
畫圖之前要先取圖形上下文(context)
context.fillStyle = 'red'; // 填充樣式
context.strokeStyle = 'blue'; // 邊框樣式
context.lineWidth = 1; // 線的寬度
設置繪圖樣式、線寬
2.繪製矩形
context.fillRect(x,y,width,height)
填充矩形
context.strokeRect(x,y,width,height)
繪製矩形
context.clearRect(x,y,width,height)
清除矩形
3.繪製圓形
context.beginPath()
context.arc(x,y,raidus,startAngle,endAngle,anticlockwise)
startAngle - 起始角度 endAngle - 結束角度 anticlockwise - 是否順時針繪製
context.closePath()
關閉路徑
圖釋：context.arc(0,0, 10, 0, Math.PI*3/2, false)
4.繪製直線、曲線
context.moveTo(x,y)
將光標移動到點（x，y）
context.lineTo(x,y)
畫直線到點(x,y),並且光標移動到當前位置
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
繪製三次貝塞爾曲線 (cp1x, cp1y) - 第一個控制點座標 (cp2x, cp2y) - 第二個控制點座標 (x,y) - 終點座標
context.quadraticCurveTo(cpx, cpy, x, y)
繪製二次貝塞爾曲線 (cpx, cpy)
5.線性漸變
var g = context.createLinearGradient(xStart, yStart, xEnd, yEnd)
創建線性漸變對象LinearGradient
g.addColorStop(offset, color)
增加漸變點, offset - 偏移量（0-1之間） color - 漸變的顏色值
context.fillStyle = g;
context.fill();
使用漸變樣式來繪製
6.徑向漸變
var g = context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
創建徑向漸變對象RadialGradient
7.座標變換
context.translate(x,y)
座標軸平移
context.scale(x,y)
縮放
context.rotate(angle)
旋轉
context.setTransform(m11, m12, m21, m22, dx, dy)
設置變換矩陣
變換矩陣對應關係:
setTransform(1, 0, 0, 1, x, y) || setTransform(0, 1, 1, 0, x, y) == translate(x,y)
setTransform(x, 0, 0, y, 0, 0) || setTransform(0, y, x, 0, 0, 0) == scale(x,y)
setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad), 0, 0) == ratate(angle)
8.圖形組合
context.globalCompostiteOperation = type
類型介紹：
source-over - 覆蓋在原有圖形之上(默認)
destination-over - 在原有圖形之下繪製新圖形
source-in - 只顯示新圖形中與原有圖形重疊的部分
destination-in - 只顯示原有圖形中與新圖形重疊的部分
source-out - 只顯示新圖形與原有圖形不重疊的部分
destination-out - 只顯示原有圖形與新圖形不重疊的部分
source-atop - 只顯示原有圖形和新圖形中與原有圖形重疊的部分
desintation-atop - 只顯示新圖形和原有圖形中與新圖形重疊的部分
lighter - 原有圖形和新圖形重疊的部分高亮
xor - 只顯示新圖形中與原有圖形不重疊的部分，重疊的部分變透明
copy - 只繪製新圖形，原有圖形中未與新圖形重疊的部分不顯示
9.繪製陰影
context.shadowOffsetX - 水平偏移
context.shadowOffsetY - 縱向偏移
context.shadowColor - 陰影顏色
context.shadowBlur - 陰影邊緣模糊範圍
10.使用圖像
context.drawImage(image, x, y)
context.drawImage(image, x, y w, h)
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
image - 可以是一個img元素、一個video元素或者一個js中的Image對象
第三種方法用於複製圖像中某區域的內容到新的區域，可用於縮放（特寫）
11.平鋪圖像
var pattern = context.createPattern(image, type)
context.fillStyle = pattern
type - （repeat, no-repeat, repeat-x, repeat-y）
12.圖像裁剪
創建好路徑之後調用：
context.clip()
13.像素處理
獲取數據:
var imagedata = context.getImageData(sx, sy, sw, sh);
得到如下數組：
[r1,g1,b1,a1,r2,g2,b2,a2,r3……]
rn - 第n個像素點的紅色值
gn - 第n個像素點的綠色值
bn - 第n個像素點的藍色值
an - 第n個像素點的透明度
設置像素：
context.putImageData(imagedata, dx, dy)
14.繪製文字
繪製文字
context.fillText(text, x ,y, [maxWidth])
context.strokeText(text, x, y, [maxWidth])
文字屬性：
context.font - 字體
context.textAlign - 水平對齊方式
context.textBaseline - 垂直對齊方式
計算文字寬度：
context.measureText(text)
15.繪製狀態的保存與恢復
context.save()
context.restore()
16.保存文件
canvas.toDataURL(type)
type - MIME類型