摘要：圓弧二次貝塞爾曲線及三次貝塞爾曲線繪制二次貝塞爾曲線，為一個控制點，為結束點。二次貝塞爾曲線三次貝塞爾曲線色彩設置圖形的填充顏色。線段末端以圓形結束。例如，表示顏色會出現在正中間。操控動畫當設定好間隔時間后，會定期執行。

fillRect(x, y, width, height) 填充矩形

strokeRect(x, y, width, height) 繪制矩形邊框

clearRect(x, y, width, height) 清除指定矩形區域，讓清除部分完全透明。

rect(x, y, width, height) 繪制一個左上角坐標為（x,y），寬高為width以及height的矩形。

繪制矩形 DEMO

beginPath() 新建一條路徑，生成之后，圖形繪制命令被指向到路徑上生成路徑。

closePath() 閉合路徑，閉合路徑之后圖形命令又重新指向到上下文中。

stroke() 通過線條來繪制圖形輪廓。

fill() 通過填充路徑的內容區域生成實心圖形。

當你調用fill()函數時，所有沒有閉合的形狀都會自動閉合，所以你不需要調用closePath()函數。但是調用stroke()時不會自動閉合。

繪制三角形 DEMO

arc(x, y, radius, startAngle, endAngle, anticlockwise) 畫一個以（x,y）為圓心的以radius為半徑的圓?。▓A），從startAngle開始到endAngle結束，按照anticlockwise給定的方向（默認為順時針）來生成。

arcTo(x1, y1, x2, y2, radius) 根據給定的控制點和半徑畫一段圓弧，再以直線連接兩個控制點。

arc()函數中表示角的單位是弧度，不是角度。角度與弧度的js表達式: 弧度=(Math.PI/180)*角度。

圓弧DEMO

quadraticCurveTo(cp1x, cp1y, x, y) 繪制二次貝塞爾曲線，cp1x,cp1y為一個控制點，x,y為結束點。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 繪制三次貝塞爾曲線，cp1x,cp1y為控制點一，cp2x,cp2y為控制點二，x,y為結束點。

二次貝塞爾曲線DEMO
三次貝塞爾曲線DEMO

fillStyle = color 設置圖形的填充顏色。

strokeStyle = color 設置圖形輪廓的顏色。

支持使用 rgba 形式。

fillStyle DEMO
strokeStyle DEMO

globalAlpha = transparencyValue 這個屬性影響到 canvas 里所有圖形的透明度，有效的值范圍是 0.0 （完全透明）到 1.0（完全不透明），默認是 1.0。

globalAlpha 屬性在需要繪制大量擁有相同透明度的圖形時候相當高效。相反，如果對單個元素添加透明度，推薦使用 rgba 形式。

透明度 DEMO
rgba() DEMO

moveTo(x, y) 將筆觸移動到指定的坐標x以及y上。

當canvas初始化或者beginPath()調用后，你通常會使用moveTo()函數設置起點。我們也能夠使用moveTo()繪制一些不連續的路徑。

移動觸筆 DEMO

lineTo(x, y) 繪制一條從當前位置到指定x以及y位置的直線。

開始點也可以通過moveTo()函數改變。

繪制兩個三角形 DEMO

lineWidth = value 設置線條寬度。

lineCap = type 設置線條末端樣式。

選項：
butt 線段末端以方形結束。
round 線段末端以圓形結束。
square 線段末端以方形結束，但是增加了一個寬度和線段相同，高度是線段厚度一半的矩形區域。

lineJoin = type 設定線條與線條間接合處的樣式。

選項：
round 通過填充一個額外的，圓心在相連部分末端的扇形，繪制拐角的形狀。 圓角的半徑是線段的寬度。
bevel 在相連部分的末端填充一個額外的以三角形為底的區域， 每個部分都有各自獨立的矩形拐角。
miter 通過延伸相連部分的外邊緣，使其相交于一點，形成一個額外的菱形區域。這個設置可以通過 miterLimit 屬性看到效果。

miterLimit = value 限制當兩條線相交時交接處最大長度；所謂交接處長度（斜接長度）是指線條交接處內角頂點到外角頂點的長度。

getLineDash() 返回一個包含當前虛線樣式，長度為非負偶數的數組。

setLineDash(segments) 設置當前虛線樣式。例：ctx.setLineDash([4, 16]);

lineDashOffset = value 設置虛線樣式的起始偏移量。

lineWidth DEMO
lineCap DEMO
lineJoin DEMO

createLinearGradient()方法創建一個沿參數坐標指定的直線的漸變。這個方法返回 CanvasGradient。

createRadialGradient() 是 Canvas 2D API 根據參數確定兩個圓的坐標，繪制放射性漸變的方法。這個方法返回 CanvasGradient。

gradient.addColorStop(position, color) addColorStop 方法接受 2 個參數，position 參數必須是一個 0.0 與 1.0 之間的數值，表示漸變中顏色所在的相對位置。例如，0.5 表示顏色會出現在正中間。color 參數必須是一個有效的 CSS 顏色值（如 #FFF， rgba(0,0,0,1)，等等）。

createLinearGradient DEMO
createRadialGradient DEMO

createPattern(image, type) Image 可以是一個 Image 對象的引用，或者另一個 canvas 對象。Type 必須是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。

如：

var img = new Image();
img.src = "someimage.png";
var ptrn = ctx.createPattern(img,"repeat");

與 drawImage 有點不同，你需要確認 image 對象已經裝載完畢，否則圖案可能效果不對的。

createPattern DEMO

shadowOffsetX = float 設定陰影在 X 軸的延伸距離。

shadowOffsetY = float 設定陰影在 Y 軸的延伸距離。

shadowBlur = float 用于設定陰影的模糊程度，其數值并不跟像素數量掛鉤，也不受變換矩陣的影響，默認為 0。

shadowColor = color 是標準的 CSS 顏色值，用于設定陰影顏色效果，默認是全透明的黑色。

文字陰影 DEMO

fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本，繪制的最大寬度是可選的.

strokeText(text, x, y [, maxWidth]) 在指定的(x,y)位置繪制文本邊框，繪制的最大寬度是可選的.

font = value 這個字符串使用和 CSS font 屬性相同的語法. 默認的字體是 10px sans-serif。

textAlign = value 文本對齊選項. 可選的值包括：start, end, left, right or center. 默認值是 start。

textBaseline = value 基線對齊選項. 可選的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默認值是 alphabetic。

direction = value 文本方向。可能的值包括：ltr, rtl, inherit。默認值是 inherit。

measureText() 將返回一個 TextMetrics對象的寬度、所在像素，這些體現文本特性的屬性。

textBaseline DEMO

canvas的API可以使用下面這些類型中的一種作為圖片的源：

HTMLImageElement 這些圖片是由Image()函數構造出來的，或者任何的元素

HTMLVideoElement 用一個HTML的

HTMLCanvasElement 可以使用另一個 元素作為你的圖片源。

ImageBitmap 這是一個高性能的位圖，可以低延遲地繪制，它可以從上述的所有源以及其它幾種源中生成。

這些源統一由 CanvasImageSource 類型來引用。

例：

var img = new Image();   // 創建img元素
img.onload = function(){
  // 執行drawImage語句
}
img.src = "myImage.png"; // 設置圖片源地址

drawImage(image, x, y) 其中 image 是 image 或者 canvas 對象，x 和 y 是其在目標 canvas 里的起始坐標。

drawImage(image, x, y, width, height) 縮放 Scaling，這個方法多了2個參數：width 和 height，這兩個參數用來控制 當向canvas畫入時應該縮放的大小

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 第一個參數和其它的是相同的，都是一個圖像或者另一個 canvas 的引用。其它8個參數最好是參照右邊的圖解，前4個是定義圖像源的切片位置和大小，后4個則是定義切片的目標顯示位置和大小。

save()

restore()

save 和 restore 方法是用來保存和恢復 canvas 狀態的，都沒有參數。Canvas 的狀態就是當前畫面應用的所有樣式和變形的一個快照。

Canvas狀態存儲在棧中，每當save()方法被調用后，當前的狀態就被推送到棧中保存。一個繪畫狀態包括：

當前應用的變形（即移動，旋轉和縮放，見下）

strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值

當前的裁切路徑（clipping path）

每一次調用 restore 方法，上一個保存的狀態就從棧中彈出，所有設定都恢復。

save 和 restore DEMO

translate(x, y) 偏移 translate 方法接受兩個參數。x 是左右偏移量，y 是上下偏移量。

rotate(angle) 這個方法只接受一個參數：旋轉的角度(angle)，它是順時針方向的，以弧度為單位的值。

scale(x, y) scale 方法接受兩個參數。x,y 分別是橫軸和縱軸的縮放因子，它們都必須是正值。值比 1.0 小表示縮小，比 1.0 大則表示放大，值為 1.0 時什么效果都沒有。

transform(m11, m12, m21, m22, dx, dy)

這個函數的參數，各自代表：
m11：水平方向的縮放，
m12：水平方向的傾斜偏移，
m21：豎直方向的傾斜偏移，
m22：豎直方向的縮放，
dx：水平方向的移動，
dy：豎直方向的移動。

setTransform(m11, m12, m21, m22, dx, dy) 這個方法會將當前的變形矩陣重置為單位矩陣，然后用相同的參數調用 transform 方法。

resetTransform() => setTransform(1, 0, 0, 1, 0, 0)。

translate DEMO
rotate DEMO

globalCompositeOperation = type 這個屬性設定了在畫新圖形時采用的遮蓋策略，其值是一個標識12種遮蓋方式的字符串，詳情 type 參見 Compositing 示例;

裁切路徑和普通的 canvas 圖形差不多，不同的是它的作用是遮罩，用來隱藏不需要的部分。

如果和 globalCompositeOperation 屬性作一比較，它可以實現與 source-in 和 source-atop差不多的效果。

clip() 方法來創建一個新的裁切路徑。

clip DEMO

你可以通過以下的步驟來畫出一幀:

清空 canvas。除非接下來要畫的內容會完全充滿 canvas （例如背景圖），否則你需要清空所有。最簡單的做法就是用 clearRect 方法。

保存 canvas 狀態
如果你要改變一些會改變 canvas 狀態的設置（樣式，變形之類的），又要在每畫一幀之時都是原始狀態的話，你需要先保存一下。

繪制動畫圖形（animated shapes）。這一步才是重繪動畫幀。

恢復 canvas 狀態。如果已經保存了 canvas 的狀態，可以先恢復它，然后重繪下一幀。

setInterval(function, delay) 當設定好間隔時間后，function會定期執行。

setTimeout(function, delay) 在設定好的時間之后執行函數。

requestAnimationFrame(callback) 告訴瀏覽器你希望執行一個動畫，并在重繪之前，請求瀏覽器執行一個特定的函數來更新動畫。

太陽系的動畫 DEMO
動畫時鐘 DEMO
循環全局 DEMO

首個預覽
加速度
長尾效果
添加鼠標控制

ImageData 對象中存儲著canvas對象真實的像素數據，它包含以下幾個只讀屬性：

width 圖片寬度，單位是像素

height 圖片高度，單位是像素

data Uint8ClampedArray 類型的一維數組，包含著RGBA格式的整型數據，范圍在0至255之間（包括255）。

data屬性返回一個 Uint8ClampedArray，它可以被使用作為查看初始像素數據。每個像素用4個1bytes值(按照紅，綠，藍和透明值的順序; 這就是"RGBA"格式) 來代表。每個顏色值部份用0至255來代表。每個部份被分配到一個在數組內連續的索引，左上角像素的紅色部份在數組的索引0位置。像素從左到右被處理，然后往下，遍歷整個數組。

去創建一個新的，空白的ImageData對象，你應該會使用createImageData() 方法。有2個版本的createImageData()方法。

var myImageData = ctx.createImageData(width, height);

得到場景像素數據，為了獲得一個包含畫布場景像素數據的ImageData對像，你可以用getImageData()方法：

var myImageData = ctx.getImageData(left, top, width, height);

這個方法會返回一個ImageData對象，它代表了畫布區域的對象數據，此畫布的四個角落分別表示為(left, top), (left + width, top), (left, top + height), 以及(left + width, top + height)四個點。這些坐標點被設定為畫布坐標空間元素。

在場景中寫入像素數據，可以用putImageData()方法去對場景進行像素數據的寫入。

ctx.putImageData(myImageData, dx, dy);

dx和dy參數表示你希望在場景內左上角繪制的像素數據所得到的設備坐標。

canvas.toDataURL(type, quality) 創建一個base64的type類型圖片，你可以有選擇地提供從0到1的 quality 品質量，1表示最好品質，0基本不被辨析但有比較小的文件大小。

canvas.toBlob(callback, type, quality) 這個創建了一個在畫布中的代表圖片的Blob對像，callback：回調函數，可獲得一個多帶帶的Blob對象參數。type 可選 DOMString類型，指定圖片格式，默認格式為image/png，quality：圖片質量。

跨域問題無法使用myImageData，demo無法正常運行

顏色選擇器 DEMO
圖片灰度和反相顏色