第15章 使用 Canvas 繪圖
15.1 基本用法
取得繪圖上下文：
var drawing = document.getElementById("drawing");
// 確定瀏覽器支持 canvas 對象
if (drawing.getContext) {
var context = drawing.getContext("2d");
}
在使用 canvas 元素之前，首先要檢測 getContext() 方法是否存在，有些瀏覽器會為 HTML 規(guī)范之外的元素創(chuàng)建默認(rèn)的 HTML 元素對象，這樣的情況下，即使 drawing 變量中保存著一個有效的元素引用，也檢測不到 getContext() 方法。
使用 toDataURL() 方法，可以導(dǎo)出在 canvas 元素上繪制的圖像，接受一個圖像的 MIME 類型格式，而且適用于創(chuàng)建圖像的任何上下文，取得繪圖中 PNG 格式（默認(rèn)格式）的圖像可以如下操作：
var drawing = document.getElementById("drawing");
// 確定瀏覽器支持 canvas 對象
if (drawing.getContext) {
// 取得圖像的數(shù)據(jù)URI
var imgURI = drawing.toDataURL("image/png");
// 顯示圖像
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);
}
15.2 2D 上下文
15.2.3 繪制路徑
實際繪制路徑：
arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x, y)為圓心繪制一條弧線，弧線半徑為radius，起始和結(jié)束角度（用弧度表示）分別為startAngle和endAngle，最后一個參數(shù)表示startAngle和endAngle是否按逆時針方向計算，值為false表示按順時針方向計算。arcTo(x1, y1, x2, y2, radius)：從上一點開始繪制一條弧線，到(x2, y2)為止，并且以給定的半徑radius穿過(x1, y1)。bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：從上一點開始繪制一條曲線，到(x, y)為止，并且以(c1x, c1y)和(c2x, c2y)為控制點。lineTo(x, y)：從上一點開始繪制一條直線，到(x, y)為止。moveTo(x, y)：將繪圖游標(biāo)移動到(x, y)，不畫線。quadraticCurveTo(cx, cy, x, y)：從上一點開始繪制一條二次曲線，到(x, y)為止，并且以(cx, cy)作為控制點。rect(x, y, width, height)：從點(x, y)開始繪制一個矩形，寬度和高度分別由width和height指定，這個方法繪制的是矩形路徑，而不是strokeRect()和fillRect()所繪制的獨立得形狀。
15.2.5 變換
可以使用如下方法來修改變換矩陣：
-
rotate(angle)：圍繞原點旋轉(zhuǎn)圖像angle弧度 -
scale(scaleX, scaleY)：縮放圖像，在x方向乘以scaleX，在y方向乘以scaleY。scaleX和scaleY的默認(rèn)值都是 1.0。 -
translate(x, y)：將坐標(biāo)原點移動到(x, y)。執(zhí)行這個變換之后，坐標(biāo)(0, 0)會變成之前由(x, y)表示的點。 -
transform(m1_1, m1_2, m2_1, m2_2, dx, dy)：直接修改變換矩陣，方式是乘以如下矩陣。
m1_1 m1_2 dx
m2_1 m2_2 dy
0 0 1
-
setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy)：將變換矩陣重置為默認(rèn)狀態(tài)，然后再調(diào)用transform()。
15.2.11 合成
globalCompositionOperation 可能值：
-
source-over（默認(rèn)）：后繪制圖層位于前圖層上方。 -
source-in：圖層重疊部分可見，其他透明。 -
source-out：圖層不重疊部分可見，先繪制層透明。 -
source-atop：圖層重疊部分可見，先繪制不受影響。 -
destination-over：后繪制圖層位于前圖層下方。 -
destination-in：后繪制圖層位于前圖層下方，不重疊部分透明。 -
destination-out：后繪制圖形擦除與先繪制圖形重疊部分。 -
destination-atop：后繪制圖層位于下方，不重疊部分，先繪制層透明。 -
lighter：重疊部分的值相加，使該部分變亮。 -
copy：后繪制圖形替代與之重疊的先繪制圖形。 -
xor：重疊部分執(zhí)行“異或”操作。
