Canvas API

矩形

1. fillRect(x, y, width, height) 填充矩形
2. strokeRect(x, y, width, height) 繪製矩形邊框
3. clearRect(x, y, width, height) 清除指定矩形區域，讓清除部分完全透明。
4. rect(x, y, width, height) 繪製一個左上角座標爲（x,y），寬高爲width以及height的矩形。

繪製矩形 DEMO

繪製路徑

1. beginPath() 新建一條路徑，生成之後，圖形繪製命令被指向到路徑上生成路徑。
2. closePath() 閉合路徑，閉合路徑之後圖形命令又重新指向到上下文中。
3. stroke() 通過線條來繪製圖形輪廓。
4. fill() 通過填充路徑的內容區域生成實心圖形。

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

繪製三角形 DEMO

圓弧

1. arc(x, y, radius, startAngle, endAngle, anticlockwise) 畫一個以（x,y）爲圓心的以radius爲半徑的圓弧（圓），從startAngle開始到endAngle結束，按照anticlockwise給定的方向（默認爲順時針）來生成。
2. arcTo(x1, y1, x2, y2, radius) 根據給定的控制點和半徑畫一段圓弧，再以直線連接兩個控制點。

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

圓弧DEMO

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

1. quadraticCurveTo(cp1x, cp1y, x, y) 繪製二次貝塞爾曲線，cp1x,cp1y爲一個控制點，x,y爲結束點。
2. bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 繪製三次貝塞爾曲線，cp1x,cp1y爲控制點一，cp2x,cp2y爲控制點二，x,y爲結束點。

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

色彩

1. fillStyle = color 設置圖形的填充顏色。
2. strokeStyle = color 設置圖形輪廓的顏色。

支持使用 rgba 形式。

fillStyle DEMO
strokeStyle DEMO

透明度

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

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

透明度 DEMO
rgba() DEMO

移動觸筆

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

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

移動觸筆 DEMO

線

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

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

繪製兩個三角形 DEMO

線型

1. lineWidth = value 設置線條寬度。
2. lineCap = type 設置線條末端樣式。

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

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

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

1. miterLimit = value 限制當兩條線相交時交接處最大長度；所謂交接處長度（斜接長度）是指線條交接處內角頂點到外角頂點的長度。
2. getLineDash() 返回一個包含當前虛線樣式，長度爲非負偶數的數組。
3. setLineDash(segments) 設置當前虛線樣式。例：ctx.setLineDash([4, 16]);
4. lineDashOffset = value 設置虛線樣式的起始偏移量。

lineWidth DEMO
lineCap DEMO
lineJoin DEMO

漸變

1. createLinearGradient()方法創建一個沿參數座標指定的直線的漸變。這個方法返回 CanvasGradient。
2. createRadialGradient() 是 Canvas 2D API 根據參數確定兩個圓的座標，繪製放射性漸變的方法。這個方法返回 CanvasGradient。
3. 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

圖案樣式

1. 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

陰影

1. shadowOffsetX = float 設定陰影在 X 軸的延伸距離。
2. shadowOffsetY = float 設定陰影在 Y 軸的延伸距離。
3. shadowBlur = float 用於設定陰影的模糊程度，其數值並不跟像素數量掛鉤，也不受變換矩陣的影響，默認爲 0。
4. shadowColor = color 是標準的 CSS 顏色值，用於設定陰影顏色效果，默認是全透明的黑色。

文字陰影 DEMO

繪製文本

1. fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本，繪製的最大寬度是可選的.
2. strokeText(text, x, y [, maxWidth]) 在指定的(x,y)位置繪製文本邊框，繪製的最大寬度是可選的.
3. font = value 這個字符串使用和 CSS font 屬性相同的語法. 默認的字體是 10px sans-serif。
4. textAlign = value 文本對齊選項. 可選的值包括：start, end, left, right or center. 默認值是 start。
5. textBaseline = value 基線對齊選項. 可選的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默認值是 alphabetic。
6. direction = value 文本方向。可能的值包括：ltr, rtl, inherit。默認值是 inherit。
7. measureText() 將返回一個 TextMetrics對象的寬度、所在像素，這些體現文本特性的屬性。

textBaseline DEMO

使用圖片

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

1. HTMLImageElement 這些圖片是由Image()函數構造出來的，或者任何的<img>元素
2. HTMLVideoElement 用一個HTML的 <video>元素作爲你的圖片源，可以從視頻中抓取當前幀作爲一個圖像
3. HTMLCanvasElement 可以使用另一個 <canvas> 元素作爲你的圖片源。
4. ImageBitmap 這是一個高性能的位圖，可以低延遲地繪製，它可以從上述的所有源以及其它幾種源中生成。

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

例：

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

繪製圖片

1. drawImage(image, x, y) 其中 image 是 image 或者 canvas 對象，x 和 y 是其在目標 canvas 裏的起始座標。
2. drawImage(image, x, y, width, height) 縮放 Scaling，這個方法多了2個參數：width 和 height，這兩個參數用來控制 當向canvas畫入時應該縮放的大小
3. drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 第一個參數和其它的是相同的，都是一個圖像或者另一個 canvas 的引用。其它8個參數最好是參照右邊的圖解，前4個是定義圖像源的切片位置和大小，後4個則是定義切片的目標顯示位置和大小。

狀態的保存和恢復

1. save()
2. 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

變形

1. translate(x, y) 偏移 translate 方法接受兩個參數。x 是左右偏移量，y 是上下偏移量。
2. rotate(angle) 這個方法只接受一個參數：旋轉的角度(angle)，它是順時針方向的，以弧度爲單位的值。
3. scale(x, y) scale 方法接受兩個參數。x,y 分別是橫軸和縱軸的縮放因子，它們都必須是正值。值比 1.0 小表示縮小，比 1.0 大則表示放大，值爲 1.0 時什麼效果都沒有。
4. transform(m11, m12, m21, m22, dx, dy)

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

1. setTransform(m11, m12, m21, m22, dx, dy) 這個方法會將當前的變形矩陣重置爲單位矩陣，然後用相同的參數調用 transform 方法。
2. resetTransform() => setTransform(1, 0, 0, 1, 0, 0)。

translate DEMO
rotate DEMO

組合

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

裁切路徑

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

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

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

clip DEMO

動畫

動畫的基本步驟

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

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

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

1. 繪製動畫圖形（animated shapes）。這一步纔是重繪動畫幀。
2. 恢復 canvas 狀態。如果已經保存了 canvas 的狀態，可以先恢復它，然後重繪下一幀。

操控動畫

1. setInterval(function, delay) 當設定好間隔時間後，function會定期執行。
2. setTimeout(function, delay) 在設定好的時間之後執行函數。
3. requestAnimationFrame(callback) 告訴瀏覽器你希望執行一個動畫，並在重繪之前，請求瀏覽器執行一個特定的函數來更新動畫。

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

小球 DEMO

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

像素操作

ImageData對象

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

1. width 圖片寬度，單位是像素
2. height 圖片高度，單位是像素
3. data Uint8ClampedArray 類型的一維數組，包含着RGBA格式的整型數據，範圍在0至255之間（包括255）。

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

創建ImageData對象

去創建一個新的，空白的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參數表示你希望在場景內左上角繪製的像素數據所得到的設備座標。

保存圖片

1. canvas.toDataURL(type, quality) 創建一個base64的type類型圖片，你可以有選擇地提供從0到1的 quality 品質量，1表示最好品質，0基本不被辨析但有比較小的文件大小。
2. canvas.toBlob(callback, type, quality) 這個創建了一個在畫布中的代表圖片的Blob對像，callback：回調函數，可獲得一個單獨的Blob對象參數。type 可選 DOMString類型，指定圖片格式，默認格式爲image/png，quality：圖片質量。

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

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