内容整理承接：
《数据可视化基础 - canvas进阶篇（三）：绘制环境》
3.8 了解：线条样式（了解）
-
lineCap 设置或返回线条的结束端点(线头、线冒)样式
-
butt ： 默认。向线条的每个末端添加平直的边缘。
-
round ： 向线条的每个末端添加圆形线帽。
-
square： 向线条的每个末端添加正方形线帽。
-
-
lineJoin 设置或返回两条线相交时，所创建的拐角类型
-
bevel: 创建斜角。
-
round: 创建圆角。
-
miter: 默认。创建尖角
-
-
lineWidth 设置或返回当前的线条宽度
-
miterLimit 设置或返回最大斜接长度
- 意思: 斜接 英 ['maɪtə]
- 斜接长度指的是在两条线交汇处内角和外角之间的距离。
一般用默认值：10就可以了。除非需要特别长的尖角时，使用此属
3.9 了解贝塞尔曲线（知道有）
3.9.1 绘制一条二次方曲线。
-
微软的画图板中的曲线的颜色。
-
quadratic：二次方的意思， 英 [kwɒ'drætɪk] 美 [kwɑ'drætɪk]
-
Curve：曲线的意思， 英 [kɜːv] 美 [kɝv]
-
语法： context.quadraticCurveTo(cpx,cpy,x,y);
-
参数：
- cpx： 贝塞尔控制点的 x 坐标
- cpy： 贝塞尔控制点的 y 坐标
- x ： 结束点的 x 坐标
- y ： 结束点的 y 坐标
1 ctx.beginPath();
2 ctx.moveTo(20,20);
3 //绘制2次方曲线，贝赛尔曲线
4 ctx.quadraticCurveTo(20,100,200,20);
5 ctx.stroke();
3.9.2 绘制贝塞尔曲线（知道有）
-
绘制一条三次贝塞尔曲线
-
语法：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
-
提示：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用beginPath() 和 moveTo() 方法来定义开始点。
-
参数说明：
- cp1x： 第一个贝塞尔控制点的 x 坐标
- cp1y： 第一个贝塞尔控制点的 y 坐标
- cp2x： 第二个贝塞尔控制点的 x 坐标
- cp2y： 第二个贝塞尔控制点的 y 坐标
- x: 结束点的 x 坐标
- y: 结束点的 y 坐标
1 //绘制复杂的贝塞尔曲线
2 ctx.beginPath();
3 ctx.moveTo(400,400);
4 //参数说明：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
5 // cp1x： 第一个贝塞尔控制点的 x 坐标
6 // cp1y： 第一个贝塞尔控制点的 y 坐标
7 // cp2x： 第二个贝塞尔控制点的 x 坐标
8 // cp2y： 第二个贝塞尔控制点的 y 坐标
9 // x: 结束点的 x 坐标
10 // y: 结束点的 y 坐标
11 ctx.bezierCurveTo(500, 200, 600, 600, 700, 300);
12 ctx.stroke();
复制
3.10了解创建两条切线的弧（知道有）
-
在画布上创建介于当前起点和两个点形成的夹角的切线之间的弧
-
语法： context.arcTo(x1,y1,x2,y2,r) ; //类比：css3中的圆角。
-
例如： ctx.arcTo(240, 100, 240, 110, 40);
-
参数：
- x1: 弧的端点1的 x 坐标
- y1: 弧的端点1的 y 坐标
- x2: 弧的端点2(终点)的 x 坐标
- y2: 弧的端点2(终点)的 y 坐标
- r : 弧的半径
1 //代码demo：
2 ctx.beginPath();
3 ctx.moveTo(100,100);
4 ctx.lineTo(200,100);
5 //context.arcTo(x1,y1,x2,y2,r); //类比：css3中的圆角。
6 ctx.arcTo(240, 100, 240, 110, 40);
7 ctx.lineTo(240, 300);
8 ctx.stroke();
3.11了解判断点是否在路径中（知道有）
context.isPointInPath(x,y);
//isPointInPath() 方法返回 true，如果指定的点位于当前路径中；否则返回 false。
//判断x,y坐标的点是否在当前的路径中。
3.12了解文本宽度计算（知道有）
context.measureText(text).width;
