canvas能干啥？繪制矩形
先上代碼，干了這杯！
<html>
<head>
<title>Canvas</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('t1');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
<script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="t1" width="150" height="150"></canvas>
</body>
</html>
當(dāng)然，還可以有另一種形式：
<script type="text/javascript" src="script.js" charset="gb2312"></script> //導(dǎo)入相關(guān)的js文件
</head>
<body onload="draw();"> 調(diào)用導(dǎo)入的js文件中的draw函數(shù)
<canvas id="t1" width="150" height="150"></canvas>
</body>
1、繪制矩形
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d"); //canvas的getContext方法獲得圖形上下文
ctx.fillStyle = "rgb(200,0,0)"; //填充樣式，rgba可指定透明度
ctx.fillRect (0, 0, 420, 350); //填充矩形
ctx.fillStyle = “red”;
ctx.strokeStyle = "blue"; //邊框樣式
ctx.lineWidth = 1; //邊框?qū)挾? ctx.fillRect(60, 60, 100, 100); //填充矩形，左上角為起點(diǎn)
ctx.strokeRect(80, 80, 125, 100); //繪制邊框，左上角為起點(diǎn)
};
return false
}
總結(jié)：style確定樣式，rect確定大小
stroke確定輪廓，fill確定填充
context.clearRect(x,y,width,height) //用來擦除，全部變透明
2、使用路徑（通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點(diǎn)的集合。）
要點(diǎn)：
beginPath()
新建一條路徑，生成之后，圖形繪制命令被指向到路徑上生成路徑。
closePath()
閉合路徑
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75, 50); //移動到指定的坐標(biāo)
ctx.lineTo(100, 75); //一條從當(dāng)前位置到指定x以及y位置的直線
ctx.lineTo(100, 25);
ctx.fill();
}
}
arc(x, y, radius, startAngle, endAngle, anticlockwise)
畫一個以（x,y）為圓心的以radius為半徑的圓?。▓A），從startAngle開始到endAngle結(jié)束，按照anticlockwise給定的方向（默認(rèn)為順時針）來生成。
arcTo(x1, y1, x2, y2, radius)
根據(jù)給定的控制點(diǎn)和半徑畫一段圓弧，再以直線連接兩個控制點(diǎn)。
特例：
quadraticCurveTo(cp1x, cp1y, x, y)
繪制二次貝塞爾曲線，cp1x,cp1y為一個控制點(diǎn)，x,y為結(jié)束點(diǎn)。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
繪制三次貝塞爾曲線，cp1x,cp1y為控制點(diǎn)一，cp2x,cp2y為控制點(diǎn)二，x,y為結(jié)束點(diǎn)
rect(x, y, width, height) 直接繪制矩形
3、Path2D對象
類似于一個小框架，目的是更快捷方便。
1、前面的方法都可以通用
2、Path2D.addPath(path [, transform]) 添加了一條路徑到當(dāng)前路徑，當(dāng)你想要從幾個元素中來創(chuàng)建對象時，這將會很實用。
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
var rectangle = new Path2D();
rectangle.rect(10, 10, 50, 50);
var circle = new Path2D();
circle.moveTo(125, 35);
circle.arc(100, 35, 25, 0, 2 * Math.PI);
ctx.stroke(rectangle);
ctx.fill(circle);
}
}
3、可以用SVG path data來初始化canvas上的路徑，使你獲取路徑時可以以SVG或canvas的方式來重用它們。
var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
先移動到點(diǎn) (M10 10) 然后再水平移動80個單位(h 80)，然后下移80個單位 (v 80)，接著左移80個單位 (h -80)，再回到起點(diǎn)處 (z)。
4
globalAlpha = transparencyValue
這個屬性影響到 canvas 里所有圖形的透明度，有效的值范圍是 0.0 （完全透明）到 1.0（完全不透明），默認(rèn)是 1.0。
5、線
lineWidth = value
設(shè)置線條寬度。
lineCap = type
設(shè)置線條末端樣式。
lineJoin = type
設(shè)定線條與線條間接合處的樣式。
miterLimit = value
限制當(dāng)兩條線相交時交接處最大長度；所謂交接處長度（斜接長度）是指線條交接處內(nèi)角頂點(diǎn)到外角頂點(diǎn)的長度。
getLineDash()
返回一個包含當(dāng)前虛線樣式，長度為非負(fù)偶數(shù)的數(shù)組。
setLineDash(segments)
設(shè)置當(dāng)前虛線樣式。
lineDashOffset = value
設(shè)置虛線樣式的起始偏移量。
6、漸變
線性漸變
createLinearGradient(x1, y1, x2, y2)
createLinearGradient 方法接受 4 個參數(shù)，表示漸變的起點(diǎn) (x1,y1) 與終點(diǎn) (x2,y2)。
addColorStop(position, color)
addColorStop 方法接受 2 個參數(shù)，position 參數(shù)必須是一個 0.0 與 1.0 之間的數(shù)值，表示漸變中顏色所在的相對位置。例如，0.5 表示顏色會出現(xiàn)在正中間。color 參數(shù)必須是一個有效的 CSS 顏色值（如 #FFF， rgba(0,0,0,1)，等等）。
徑向漸變
createRadialGradient(x1, y1, r1, x2, y2, r2)
createRadialGradient 方法接受 6 個參數(shù)，前三個定義一個以 (x1,y1) 為原點(diǎn)，半徑為 r1 的圓，后三個參數(shù)則定義另一個以 (x2,y2) 為原點(diǎn)，半徑為 r2 的圓。
也可以使用addColorStop(position, color)
7、陰影
shadowOffsetX = float
shadowOffsetX 和 shadowOffsetY 用來設(shè)定陰影在 X 和 Y 軸的延伸距離，它們是不受變換矩陣所影響的。負(fù)值表示陰影會往上或左延伸，正值則表示會往下或右延伸，它們默認(rèn)都為 0。
shadowOffsetY = float
shadowOffsetX 和 shadowOffsetY 用來設(shè)定陰影在 X 和 Y 軸的延伸距離，它們是不受變換矩陣所影響的。負(fù)值表示陰影會往上或左延伸，正值則表示會往下或右延伸，它們默認(rèn)都為 0。
shadowBlur = float
shadowBlur 用于設(shè)定陰影的模糊程度，其數(shù)值并不跟像素數(shù)量掛鉤，也不受變換矩陣的影響，默認(rèn)為 0。
shadowColor = color
shadowColor 是標(biāo)準(zhǔn)的 CSS 顏色值，用于設(shè)定陰影顏色效果，默認(rèn)是全透明的黑色。
8、繪制文本
fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本，繪制的最大寬度是可選的.
strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置繪制文本邊框，繪制的最大寬度是可選的.
文本樣式
font = value
當(dāng)前我們用來繪制文本的樣式. 這個字符串使用和 CSS font 屬性相同的語法. 默認(rèn)的字體是 10px sans-serif。
textAlign = value
文本對齊選項. 可選的值包括：start, end, left, right or center. 默認(rèn)值是 start。
textBaseline = value
基線對齊選項. 可選的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默認(rèn)值是 alphabetic。
direction = value
文本方向。可能的值包括：ltr, rtl, inherit。默認(rèn)值是 inherit。
測量寬度
measureText()
將返回一個 TextMetrics對象的寬度、所在像素，這些體現(xiàn)文本特性的屬性。
9、圖片
createPattern(image, type)
該方法接受兩個參數(shù)。Image 可以是一個 Image 對象的引用，或者另一個 canvas 對象。Type 必須是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。
drawImage(image, x, y)
其中 image 是 image 或者 canvas 對象，x 和 y 是其在目標(biāo) canvas 里的起始坐標(biāo)。
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
}
drawImage(image, x, y, width, height)
這個方法多了2個參數(shù)：width 和 height，這兩個參數(shù)用來控制 當(dāng)向canvas畫入時應(yīng)該縮放的大小
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一個參數(shù)和其它的是相同的，都是一個圖像或者另一個 canvas 的引用。其它8個參數(shù)最好是參照右邊的圖解，前4個是定義圖像源的切片位置和大小，后4個則是定義切片的目標(biāo)顯示位置和大小。
imageSmoothingEnabled屬性來控制是否在縮放圖像時使用平滑算法。默認(rèn)值為true，即啟用平滑縮放。
HTMLImageElement
這些圖片是由Image()函數(shù)構(gòu)造出來的，或者任何的<img>元素
HTMLVideoElement
用一個HTML的 <video>元素作為你的圖片源，可以從視頻中抓取當(dāng)前幀作為一個圖像
HTMLCanvasElement
可以使用另一個 <canvas> 元素作為你的圖片源。
ImageBitmap
這是一個高性能的位圖，可以低延遲地繪制，它可以從上述的所有源以及其它幾種源中生成。
10、保存與恢復(fù)
save()
保存畫布(canvas)的所有狀態(tài)
restore()
save 和 restore 方法是用來保存和恢復(fù) canvas 狀態(tài)的，都沒有參數(shù)。Canvas 的狀態(tài)就是當(dāng)前畫面應(yīng)用的所有樣式和變形的一個快照。
11、坐標(biāo)變換
translate(x, y)
translate 方法接受兩個參數(shù)。x 是左右偏移量，y 是上下偏移量。
rotate(angle)
這個方法只接受一個參數(shù)：旋轉(zhuǎn)的角度(angle)，它是順時針方向的，以弧度為單位的值。旋轉(zhuǎn)的中心點(diǎn)始終是 canvas 的原點(diǎn)，如果要改變它，我們需要用到 translate 方法。
scale(x, y)
scale 方法可以縮放畫布的水平和垂直的單位。兩個參數(shù)都是實數(shù)，可以為負(fù)數(shù)，x 為水平縮放因子，y 為垂直縮放因子，如果比1小，會縮小圖形， 如果比1大會放大圖形。默認(rèn)值為1， 為實際大小。
12、變形
transform(a, b, c, d, e, f)
這個方法是將當(dāng)前的變形矩陣乘上一個基于自身參數(shù)的矩陣，如下面的矩陣所示：[ a c e b d f 0 0 1 ]（3x3的矩陣）
如果任意一個參數(shù)是Infinity，變形矩陣也必須被標(biāo)記為無限大，否則會拋出異常。
這個函數(shù)的參數(shù)各自代表如下：
a (m11)
水平方向的縮放
b(m12)
豎直方向的傾斜偏移
c(m21)
水平方向的傾斜偏移
d(m22)
豎直方向的縮放
e(dx)
水平方向的移動
f(dy)
豎直方向的移動
setTransform(a, b, c, d, e, f)
這個方法會將當(dāng)前的變形矩陣重置為單位矩陣，然后用相同的參數(shù)調(diào)用 transform 方法。如果任意一個參數(shù)是無限大，那么變形矩陣也必須被標(biāo)記為無限大，否則會拋出異常。從根本上來說，該方法是取消了當(dāng)前變形,然后設(shè)置為指定的變形,一步完成。
resetTransform()
重置當(dāng)前變形為單位矩陣，它和調(diào)用以下語句是一樣的：ctx.setTransform(1, 0, 0, 1, 0, 0);
globalCompositeOperation = type
這個屬性設(shè)定了在畫新圖形時采用的遮蓋策略，其值是一個標(biāo)識12種遮蓋方式的字符串。
clip()
將當(dāng)前正在構(gòu)建的路徑轉(zhuǎn)換為當(dāng)前的裁剪路徑。
我們使用 clip()方法來創(chuàng)建一個新的裁切路徑。
默認(rèn)情況下，canvas 有一個與它自身一樣大的裁切路徑（也就是沒有裁切效果）。
13、動畫
動畫比較簡單，簡單來說，就是不斷擦除、重繪、擦除、重繪的過程。
setInterval(function, delay)
當(dāng)設(shè)定好間隔時間后，function會定期執(zhí)行。
setTimeout(function, delay)
在設(shè)定好的時間之后執(zhí)行函數(shù)
requestAnimationFrame(callback)
告訴瀏覽器你希望執(zhí)行一個動畫，并在重繪之前，請求瀏覽器執(zhí)行一個特定的函數(shù)來更新動畫。
14、ImageData 對象
width
圖片寬度，單位是像素
height
圖片高度，單位是像素
data
Uint8ClampedArray類型的一維數(shù)組，包含著RGBA格式的整型數(shù)據(jù)，范圍在0至255之間（包括255）。
createImageData(width, height)/createImageData(anotherImageData)
getImageData()方法得到場景像素數(shù)據(jù)
putImageData()方法去對場景進(jìn)行像素數(shù)據(jù)的寫入。
HTMLCanvasElement 提供一個toDataURL()方法，此方法在保存圖片的時候非常有用。它返回一個包含被類型參數(shù)規(guī)定的圖像表現(xiàn)格式的數(shù)據(jù)鏈接。返回的圖片分辨率是96dpi。
canvas.toDataURL('image/png')
默認(rèn)設(shè)定。創(chuàng)建一個PNG圖片。
Default setting. Creates a PNG image.
canvas.toDataURL('image/jpeg', quality)
創(chuàng)建一個JPG圖片。你可以有選擇地提供從0到1的品質(zhì)量，1表示最好品質(zhì)，0基本不被辨析但有比較小的文件大小。
當(dāng)你從畫布中生成了一個數(shù)據(jù)鏈接，例如，你可以將它用于任何<image>元素，或者將它放在一個有download屬性的超鏈接里用于保存到本地。
你也可以從畫布中創(chuàng)建一個Blob對像。
canvas.toBlob(callback, type, encoderOptions)
這個創(chuàng)建了一個在畫布中的代表圖片的Blob對像。
