javascript基础学习系列二百九十二：绘制路径

2D 绘图上下文支持很多在画布上绘制路径的方法。通过路径可以创建复杂的形状和线条。要绘制 路径，必须首先调用 beginPath()方法以表示要开始绘制新路径。然后，再调用下列方法来绘制路径。
 arc(x, y, radius, startAngle, endAngle, counterclockwise):以坐标(x, y)为圆 心，以 radius 为半径绘制一条弧线，起始角度为 startAngle，结束角度为 endAngle(都是 弧度)。最后一个参数 counterclockwise 表示是否逆时针计算起始角度和结束角度(默认为 顺时针)。
 arcTo(x1, y1, x2, y2, radius):以给定半径 radius，经由(x1, y1)绘制一条从上一点 到(x2, y2)的弧线。
 bezierCurveTo(c1x, c1y, c2x, c2y, x, y):以(c1x, c1y)和(c2x, c2y)为控制点， 绘制一条从上一点到(x, y)的弧线(三次贝塞尔曲线)。
 lineTo(x, y):绘制一条从上一点到(x, y)的直线。
 moveTo(x, y):不绘制线条，只把绘制光标移动到(x, y)。
quadraticCurveTo(cx, cy, x, y):以(cx, cy)为控制点，绘制一条从上一点到(x, y)
的弧线(二次贝塞尔曲线)。
 rect(x, y, width, height):以给定宽度和高度在坐标点(x, y)绘制一个矩形。这个方法
与 strokeRect()和 fillRect()的区别在于，它创建的是一条路径，而不是独立的图形。 创建路径之后，可以使用 closePath()方法绘制一条返回起点的线。如果路径已经完成，则既可 以指定 fillStyle 属性并调用 fill()方法来填充路径，也可以指定 strokeStyle 属性并调用
stroke()方法来描画路径，还可以调用 clip()方法基于已有路径创建一个新剪切区域。 下面这个例子使用前面提到的方法绘制了一个不带数字的表盘:

 let drawing = document.getElementById("drawing");
// 确保浏览器支持<canvas> if (drawing.getContext) {
  let context = drawing.getContext("2d");
// 创建路径 context.beginPath();
// 绘制外圆
context.arc(100, 100, 99, 0, 2 * Math.PI, false);
// 绘制内圆
context.moveTo(194, 100);
context.arc(100, 100, 94, 0, 2 * Math.PI, false);
// 绘制分针 context.moveTo(100, 100); context.lineTo(100, 15);
// 绘制时针 context.moveTo(100, 100); context.lineTo(35, 100);
// 描画路径
  context.stroke();
}

这个例子使用 arc()绘制了两个圆形，一个外圆和一个内圆，以构成表盘的边框。外圆半径 99 像 素，原点为(100,100)，也就是画布的中心。要绘制完整的圆形，必须从 0 弧度绘制到 2π 弧度(使用数 学常量 Math.PI)。而在绘制内圆之前，必须先把路径移动到内圆上的一点，以避免绘制出多余的线条。 22 第二次调用 arc()时使用了稍小一些的半径，以呈现边框效果。然后，再组合运用 moveTo()和 lineTo() 分别绘制分针和时针。最后一步是调用 stroke()，得到 所示的图像。

路径是 2D 上下文的主要绘制机制，为绘制结果提供了很多控制。因为路径经常被使用，所以也有 一个 isPointInPath()方法，接收 x 轴和 y 轴坐标作为参数。这个方法用于确定指定的点是否在路径 上，可以在关闭路径前随时调用，比如:

   if (context.isPointInPath(100, 100)) {
      alert("Point (100, 100) is in the path.");
}

2D 上下文的路径 API 非常可靠，可用于创建涉及各种填充样式、描述样式等的复杂图像。

文本和图像混合也是常见的绘制需求，因此 2D 绘图上下文还提供了绘制文本的方法，即 fillText() 和 strokeText()。这两个方法都接收 4 个参数:要绘制的字符串、x 坐标、y 坐标和可选的最大像素 宽度。而且，这两个方法最终绘制的结果都取决于以下 3 个属性。
 font:以 CSS 语法指定的字体样式、大小、字体族等，比如"10px Arial"。
 textAlign:指定文本的对齐方式，可能的值包括"start"、“end”、“left”、“right"和 “center”。推荐使用"start"和"end”，不使用"left"和"right"，因为前者无论在从左到右
书写的语言还是从右到左书写的语言中含义都更明确。
textBaseLine: 指 定 文 本 的 基 线 ， 可 能 的 值 包 括"top"、“hanging”、“middle”、
“alphabetic”、“ideographic"和"bottom”。 这些属性都有相应的默认值，因此没必要每次绘制文本时都设置它们。fillText()方法使用
fillStyle 属性绘制文本，而 strokeText()方法使用 strokeStyle 属性。通常，fillText()方法 是使用最多的，因为它模拟了在网页中渲染文本。例如，下面的例子会在前一节示例的表盘顶部绘制数 字“12”:

context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12", 100, 20);

因为把 textAlign 设置为了"center"，把 textBaseline 设置为了"middle"，所以(100, 20)表 示文本水平和垂直中心点的坐标。如果 textAlign 是"start"，那么 x 坐标在从左到右书写的语言中 表示文本的左侧坐标，而"end"会让 x 坐标在从左到右书写的语言中表示文本的右侧坐标。例如:

// 正常
context.font = "bold 14px Arial"; context.textAlign = "center"; context.textBaseline = "middle"; context.fillText("12", 100, 20); // 与开头对齐
context.textAlign = "start"; context.fillText("12", 100, 40); // 与末尾对齐
context.textAlign = "end"; context.fillText("12", 100, 60);

字符串"12"被绘制了 3 次，每次使用的坐标都一样，但 textAlign 值不同。为了让每个字符串不
至于重叠，每次绘制的 y 坐标都会设置得大一些。结果就是所示的图像。

因为表盘中垂直的线条是居中的，所以文本的对齐方式就一目了然了。类似地，通过修改 textBaseline 19 属性，可以改变文本的垂直对齐方式。比如，设置为"top"意味着 y 坐标表示文本顶部，"bottom"表示 文本底部，“hanging”、"alphabetic"和"ideographic"分别引用字体中特定的基准点。
由于绘制文本很复杂，特别是想把文本绘制到特定区域的时候，因此 2D 上下文提供了用于辅助确 20 定文本大小的 measureText()方法。这个方法接收一个参数，即要绘制的文本，然后返回一个
TextMetrics 对象。这个返回的对象目前只有一个属性 width，不过将来应该会增加更多度量指标。 measureText()方法使用 font、textAlign 和 textBaseline 属性当前的值计算绘制指定文本 后的大小。例如，假设要把文本"Hello world!"放到一个 140 像素宽的矩形中，可以使用以下代码，
从 100 像素的字体大小开始计算，不断递减，直到文本大小合适:

   let fontSize = 100;
    context.font = fontSize + "px Arial";
    while(context.measureText("Hello world!").width > 140) {
fontSize--;
      context.font = fontSize + "px Arial";
    }
    context.fillText("Hello world!", 10, 10);
    context.fillText("Font size is " + fontSize + "px", 10, 50);

fillText()和 strokeText()方法还有第四个参数，即文本的最大宽度。这个参数是可选的 (Firefox 4 是第一个实现它的浏览器)，如果调用 fillText()和 strokeText()时提供了此参数，但要 绘制的字符串超出了最大宽度限制，则文本会以正确的字符高度绘制，这时字符会被水平压缩，以达到
限定宽度。展示了这个参数的效果。