第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：重叠部分执行“异或”操作。