HTML DOM CanvasRenderingContext2D 對象
CanvasRenderingContext2D 對象
CanvasRenderingContext2D 對象提供了一組用來在畫布上繪制的圖形函數(shù)。可用的函數(shù)非常豐富，它們可以分為以下幾類：
繪制矩形
可以使用 strokeRect() 和 fillRect() 來繪制矩形的邊框和填充矩形。此外，可以使用 clearRect() 來清除矩形所定義的區(qū)域。
繪制圖像
在 Canvas API 中，圖像通過表示 HTML <img> 元素的 Image 對象來指定，或者通過使用 Image() 構(gòu)造函數(shù)所創(chuàng)建的屏幕外圖像來指定。一個 Canvas 對象也可以用作圖像來源。
可以使用 drawImage() 方法在一個畫布上繪制圖像；而更為常見的形式是，允許源圖像的任意矩形區(qū)域縮放或繪制到畫布上。
創(chuàng)建和渲染路徑
畫布的一項(xiàng)強(qiáng)大功能是，它能夠從基本的繪圖操作來構(gòu)建圖形，然后，繪制這些圖形的框架（勾勒它們）或者給這些圖形的內(nèi)容涂色（填充它們）。累計起來的操作統(tǒng)一叫做當(dāng)前路徑。一個畫布只保持一條當(dāng)前路徑。
為了構(gòu)建一個多條線段所構(gòu)成的一個連續(xù)的封閉形狀，繪制操作之間需要一個連接點(diǎn)。為此，畫布保存了一個當(dāng)前位置。畫布繪制操作顯式地使用這個位置作為它們的起始點(diǎn)，并且更新它直到到達(dá)終點(diǎn)�？梢园堰@看做是使用鋼筆或紙來繪畫：當(dāng)您完成了一條具體的線段或曲線，當(dāng)前位置就是完成這一操作之后鋼筆所停留的點(diǎn)。
可以在當(dāng)前路徑中創(chuàng)建一系列互相不連續(xù)的形狀，它們都使用同樣的繪制參數(shù)一起渲染。要分隔開這些形狀，請使用 moveTo() 方法，這個方法把當(dāng)前的位置移動到一個新的位置而不添加一條連接線段。當(dāng)您這么做的時候，就創(chuàng)建了一條新的路徑，這是用來表示一組連接起來的操作的畫布術(shù)語。
一旦您所想要的路徑形成了，可以使用 stroke() 繪制其邊框，使用 fill() 來繪制其內(nèi)容；或者兩件事都做。
可用的圖形操作有：用來繪制直線的 lineTo()，用于繪制矩形的 rect()，用于繪制部分圓形的 arc() 或 arcTo()，以及用于繪制曲線的 bezierCurveTo() 或 quadraticCurveTo()。
除了勾勒和填充，還可以使用當(dāng)前路徑來指定繪制時畫布所使用的剪切區(qū)域。這個區(qū)域中的像素是顯示的，區(qū)域之外的像素是不顯示的。剪切區(qū)域是累加性的；調(diào)用 clip() 可以將當(dāng)前路徑和當(dāng)前繪制區(qū)域取交集，產(chǎn)生一個新的區(qū)域。不幸的是，沒有直接的方法把當(dāng)前的剪切區(qū)域設(shè)置為畫布的范圍；要做到這一點(diǎn)，必須保存和恢復(fù)畫布的整個圖形狀態(tài)。
如果任何子路徑中的線段沒有形成一個閉合的圖形，fill() 和 clip() 操作通過添加一條從子路徑的起點(diǎn)到終點(diǎn)的、虛擬（勾勒的時候看不到）線段來閉合它�？蛇x的是，也可以調(diào)用 closePath() 來顯示地添加這條線段。
顏色、漸變和模式
在填充和勾勒路徑時，可用 fillStyle 和 strokeStyle 屬性來指定線段或者繪制區(qū)域如何繪制。CSS 樣式顏色字符串，以及描述漸變和模式的 CanvasGradient 或 CanvasPattern 都是可以接受的。要創(chuàng)建一個漸變，請使用 createLinearGradient() 或 createRadialGradient()。要創(chuàng)建一個模式，請使用 createPattern()。
要用 CSS 表示法來指定不透明的顏色，就采用 "#RRGGBB" 形式的字符串，其中 RR、GG 和 BB 分別是指定顏色的紅色、綠色和藍(lán)色成分的十六進(jìn)制，其值都在 00 和 FF 之間。例如，完全紅色的值是 "#FF0000"。要指定部分透明的顏色，請使用一個 "rgba(R,G,B,A)" 形式的字符串。在這種形式中，R、G 和 B 將顏色的紅色、綠色和藍(lán)色成分指定為 0 到 255 之間的十進(jìn)制整數(shù)，并且 A 把 alpha（不透明）成分指定為 0.0 （完全透明）和 1.0 （完全不透明）之間的一個浮點(diǎn)數(shù)值。例如，半透明的完全紅色為 "rgba(255,0,0,0.5)"。
線條寬度、線帽和線條連接
畫布為調(diào)整各種線條顯示提供了幾個選項(xiàng)�？梢允褂� lineWidth 屬性來指定線條的寬度，用 lineCap 屬性來指定的端點(diǎn)如何繪制，并且用 lineJoin 屬性來指定線條如何連接。
坐標(biāo)空間和轉(zhuǎn)換
默認(rèn)情況下，一個畫布的坐標(biāo)空間使用畫布的左上角 (0,0) 作為原點(diǎn)，x 值向右增加，y 值向下增加。這個坐標(biāo)空間中的一個單位通常轉(zhuǎn)換為像素。
然后，可以轉(zhuǎn)換坐標(biāo)空間，產(chǎn)生你在繪圖操作中所指定的用來移動、縮放或旋轉(zhuǎn)的任何坐標(biāo)或范圍。這通過 translate()、scale() 和 rotate() 方法來實(shí)現(xiàn)，它們會對畫布的變換矩陣產(chǎn)生影響。由于坐標(biāo)空間可以像這樣轉(zhuǎn)換，您傳遞給 lineTo() 這樣方法的坐標(biāo)可能無法用像素來度量。因此，Canvas API 使用浮點(diǎn)數(shù)而不是整數(shù)。
變換按照它們被指定的順序相反的順序來處理。例如，調(diào)用 scale() 之后，緊接著調(diào)用 translate()，這會首先變換坐標(biāo)系統(tǒng)，然后再縮放。
組合
通常，圖形是一個繪制于另一個的上面，新的圖形使得在它之前繪制在其下方的圖形變得模糊。這是一個畫布中的默認(rèn)行為。然而，您可以通過為 globalCompositeOperation 屬性指定不同的值來執(zhí)行很多有趣的操作，范圍包括從 XOR 操作到增量或減暗圖形區(qū)域。
陰影
Canvas API 包含了可以自動為您所繪制的任何圖形添加下拉陰影的屬性。然而，在編寫本參考頁時，Safari 是唯一實(shí)現(xiàn)了這一 API 的瀏覽器。陰影的顏色可用 shadowColor 屬性來指定，并且可以通過 shadowOffsetX 和 shadowOffsetY 屬性來改變。另外，應(yīng)用到陰影邊緣的羽化量也可以使用 shadowBlur 屬性來設(shè)置。
保存圖形狀態(tài)
save() 和 restore() 方法允許你保存和恢復(fù)一個 CanvasRenderingContext2D 對象的狀態(tài)。save() 把當(dāng)前狀態(tài)推入到棧中，而 restore() 從棧的頂端彈出最近保存的狀態(tài)，并且根據(jù)這些存儲的值來設(shè)置當(dāng)前繪圖狀態(tài)。
CanvasRenderingContext2D 對象的所有屬性（除了畫布的屬性是一個常量）都是保存的狀態(tài)的一部分。變換矩陣和剪切區(qū)域也是這個狀態(tài)的一部分，但是當(dāng)前路徑和當(dāng)前點(diǎn)并不是。
CanvasRenderingContext2D 對象的屬性
canvas 屬性
這個環(huán)境可以繪制于其上的 Canvas 元素。
fillStyle 屬性
用來填充路徑的當(dāng)前的顏色、模式或漸變。這個屬性可以設(shè)置為一個字符串或者一個 CanvasGradient 對象 或 CanvasPattern 對象。當(dāng)設(shè)置為一個字符串時，它被解析為一個 CSS 顏色值并且用來進(jìn)行實(shí)心填充。當(dāng)設(shè)置為一個 CanvasGradient 或 CanvasPattern 對象，通過使用指定的漸變或模式來完成填充。
globalAlpha 屬性
指定在畫布上繪制的內(nèi)容的不透明度。這個值的范圍在 0.0（完全透明）和 1.0（完全不透明）之間。默認(rèn)值為 1.0。
globalCompositeOperation 屬性
指定顏色如何與畫布上已有的顏色組合（合成）。如需更多細(xì)節(jié)，請參閱 globalCompositeOperation 屬性參考頁。
lineCap 屬性
指定線條的末端如何繪制。合法的值是 "butt"、"round" 和 "square"。默認(rèn)值是 "butt"。如需更多細(xì)節(jié)，請參閱 lineCap 屬性參考頁。
lineJoin 屬性
指定兩條線條如何連接。合法的值是 "round"、"bevel" 和 "miter"。默認(rèn)值是 "miter"。如需更多細(xì)節(jié)，請參閱 lineJoin 屬性參考頁。
lineWidth 屬性
指定了畫筆（繪制線條）操作的線條寬度。默認(rèn)值是 1.0，并且這個屬性必須大于 0.0。較寬的線條在路徑上居中，每邊有線條寬的一半。
miterLimit 屬性
當(dāng) lineJoin 屬性為 "miter" 的時候，這個屬性指定了斜連接長度和線條寬度的最大比率。如需更多細(xì)節(jié)，請參閱 miterLimit 屬性參考頁。
shadowBlur 屬性
指定羽化陰影的程度。默認(rèn)值是 0。陰影效果得到 safari 的支持，但是并沒有得到 FireFox 1.5 或 Opera 9 的支持。
shadowColor 屬性
把陰影的顏色指定為一個 CSS 字符串或 Web 樣式字符串，并且可以包含一個 alpha 部分來表示透明度。默認(rèn)值是 black。陰影效果得到 Safari 的支持，但是并沒有得到 FireFox 1.5 或 Opera 9 的支持。
shadowOffsetX, shadowOffsetY 屬性
指定陰影的水平偏移和垂直偏移。較大的值使得陰影化的對象似乎漂浮在背景的較高位置上。默認(rèn)值是 0。陰影效果得到 Safari 的支持，但是并沒有得到 FireFox 1.5 或 Opera 9 的支持。
strokeStyle 屬性
指定了用于畫筆（繪制）路徑的顏色、模式和漸變。這個屬性可能是一個字符串，或者一個 CanvasGradient 對象 或 CanvasPattern 對象。如果是一個字符串，它被解析為一個 CSS 顏色值，并且畫筆用所得的實(shí)色來繪制。如果這個屬性的值是一個 CanvasGradient 對象或 CanvasPattern 對象，畫筆使用這個漸變或模式來實(shí)現(xiàn)。
CanvasRenderingContext2D 對象的方法
| 方法 | 描述 |
|---|---|
| arc() | 用一個中心點(diǎn)和半徑，為一個畫布的當(dāng)前子路徑添加一條弧線。 |
| arcTo() | 使用目標(biāo)點(diǎn)和一個半徑，為當(dāng)前的子路徑添加一條弧線。 |
| beginPath() | 開始一個畫布中的一條新路徑（或者子路徑的一個集合）。 |
| bezierCurveTo() | 為當(dāng)前的子路徑添加一個三次貝塞爾曲線。 |
| clearRect() | 在一個畫布的一個矩形區(qū)域中清除掉像素。 |
| clip() | 使用當(dāng)前路徑作為連續(xù)繪制操作的剪切區(qū)域。 |
| closePath() | 如果當(dāng)前子路徑是打開的，就關(guān)閉它。 |
| createLinearGradient() | 返回代表線性顏色漸變的一個 CanvasGradient 對象。 |
| createPattern() | 返回代表貼圖圖像的一個 CanvasPattern 對象。 |
| createRadialGradient() | 返回代表放射顏色漸變的一個 CanvasGradient 對象。 |
| drawImage() | 繪制一幅圖像。 |
| fill() | 使用指定顏色、漸變或模式來繪制或填充當(dāng)前路徑的內(nèi)部。 |
| fillRect() | 繪制或填充一個矩形。 |
| lineTo() | 為當(dāng)前的子路徑添加一條直線線段。 |
| moveTo() | 設(shè)置當(dāng)前位置并開始一條新的子路徑。 |
| quadraticCurveTo() | 為當(dāng)前路徑添加一條貝塞爾曲線。 |
| rect() | 為當(dāng)前路徑添加一條矩形子路徑。 |
| restore() | 為畫布重置為最近保存的圖像狀態(tài)。 |
| rotate() | 旋轉(zhuǎn)畫布。 |
| save() | 保存 CanvasRenderingContext2D 對象的屬性、剪切區(qū)域和變換矩陣。 |
| scale() | 標(biāo)注畫布的用戶坐標(biāo)系統(tǒng)。 |
| stroke() | 沿著當(dāng)前路徑繪制或畫一條直線。 |
| strokeRect() | 繪制（但不填充）一個矩形。 |
| translate() | 轉(zhuǎn)換畫布的用戶坐標(biāo)系統(tǒng)。 |