第15章 使用 Canvas 绘图
15.1 基本用法
取得绘图上下文：
var drawing = document.getElementById("drawing");
// 确定浏览器支持 canvas 对象
if (drawing.getContext) {
var context = drawing.getContext("2d");
}
在使用 canvas 元素之前，首先要检测 getContext() 方法是否存在，有些浏览器会为 HTML 规范之外的元素创建默认的 HTML 元素对象，这样的情况下，即使 drawing 变量中保存着一个有效的元素引用，也检测不到 getContext() 方法。
使用 toDataURL() 方法，可以导出在 canvas 元素上绘制的图像，接受一个图像的 MIME 类型格式，而且适用于创建图像的任何上下文，取得绘图中 PNG 格式（默认格式）的图像可以如下操作：
var drawing = document.getElementById("drawing");
// 确定浏览器支持 canvas 对象
if (drawing.getContext) {
// 取得图像的数据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，起始和结束角度（用弧度表示）分别为startAngle和endAngle，最后一个参数表示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)：将绘图游标移动到(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)：围绕原点旋转图像angle弧度 -
scale(scaleX, scaleY)：缩放图像，在x方向乘以scaleX，在y方向乘以scaleY。scaleX和scaleY的默认值都是 1.0。 -
translate(x, y)：将坐标原点移动到(x, y)。执行这个变换之后，坐标(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)：将变换矩阵重置为默认状态，然后再调用transform()。
15.2.11 合成
globalCompositionOperation 可能值：
-
source-over（默认）：后绘制图层位于前图层上方。 -
source-in：图层重叠部分可见，其他透明。 -
source-out：图层不重叠部分可见，先绘制层透明。 -
source-atop：图层重叠部分可见，先绘制不受影响。 -
destination-over：后绘制图层位于前图层下方。 -
destination-in：后绘制图层位于前图层下方，不重叠部分透明。 -
destination-out：后绘制图形擦除与先绘制图形重叠部分。 -
destination-atop：后绘制图层位于下方，不重叠部分，先绘制层透明。 -
lighter：重叠部分的值相加，使该部分变亮。 -
copy：后绘制图形替代与之重叠的先绘制图形。 -
xor：重叠部分执行“异或”操作。