上一章学习了 lineWidth 属性， 这一章将继续的学习线条的一些其他的属性。
主要有以下3个知识点：
- lineCap: 设置线条开端和尾部， butt | square | round
- 绘制五角星的方法，对其进行封装drawStar()
- lineJoin： 线条相交处的形状， miter | bevel | round,以及miterLimit属性
lineCap
用于设置一个线条两段的形状， 可选的形状有： butt(默认值) | square | round
这个属性只能用于线段的开始和结尾处，不能用于线段的连接处
效果如下图： 分别是默认效果('butt')，'round', 'square':
图中橘红色的线为基线，作对比用
绘制五角星
绘制一个五角星，最主要的是分析五角星的各个顶点的坐标，这就要用到数学的知识了。但是浏览器中的坐标系和数学中的坐标系有以下几点不同：
- 浏览器中的Y轴是向下的，在x轴上的y坐标需要添加负号
- 浏览器中是使用弧度计算角度的，所以需要通过公式将角度转换为弧度, 比如将70°转换为弧度：
Math.sin( (70 / 180) * Math.PI )
分析一下：
- 五角星5个顶点，相连2个顶点之间的夹角为（360° / 5 = 72°）
- 五角星由内部一个小圆和外部一个大圆构成
- 以五角星中心为坐标原点，右上角为第1个点，逆时针旋转，外层圆初始角度为18°， 内部小圆初始角度为（18°+36°=54°）
- 然后不同圆下一个角度都相差72°
这样我们可以将各个顶点坐标用for循环表示出来：
for (var i = 0; i < 5; i++) {
ctx.lineTo(
Math.cos( (18 + 72*i)/180 * Math.PI ) * 300 + 400,
-Math.sin( (18 + 72*i)/180 * Math.PI ) * 300 + 400
);
ctx.lineTo(
Math.cos( (54 + 72*i)/180 * Math.PI ) * 150 + 400,
-Math.sin( (54 + 72*i)/180 * Math.PI ) * 150 + 400
);
}
// 其中 300， 150 分别表示大圆的半径R， 小圆的半径r
// (400, 400)为圆心的坐标
# 注意Math.sin前面是负号
然后我们可以对上面的过程进行封装：
/*
* @param ctx: canvas context
* @param x, y: 圆心坐标值
* @param R, r: 大圆，小圆的半径
*/
function drawStar(ctx, x, y, R, r) {
ctx.beginPath();
for (var i = 0; i < 5; i++) {
ctx.lineTo(
Math.cos ( (18 + i*72) / 180 * Math.PI ) * R + x,
-Math.sine( (18 + i*72) / 180 * Math.PI ) * R + y
);
ctx.lineTo(
Math.cos ( (54 + i*72) / 180 * Math.PI ) * r + x,
-Math.sine( (54 + i*72) / 180 * Math.PI ) * r + y
);
}
ctx.closePath();
ctx.stroke();
}
调用：
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.lineWidth = 10;
# 调用
drawStar(ctx, 400, 400, 300, 150);
另外我们可以给五角星添加一个旋转角度rotation
# 因为我们是逆时针计算的，所以rotation前面应该添加负数
# 并且给rotation添加一个默认值0
function drawStar(ctx, x, y, R, r， rotation = 0) {
ctx.beginPath();
for (var i = 0; i < 5; i++) {
ctx.lineTo(
Math.cos ( (18 + i*72 - rotation) / 180 * Math.PI ) * R + x,
-Math.sine( (18 + i*72 - rotation) / 180 * Math.PI ) * R + y
);
ctx.lineTo(
Math.cos ( (54 + i*72 - rotation) / 180 * Math.PI ) * r + x,
-Math.sine( (54 + i*72 - rotation) / 180 * Math.PI ) * r + y
);
}
ctx.closePath();
ctx.stroke();
}
则将五角星旋转50°：
ctx.strokeStyle = 'green';
ctx.lineWidth = 10;
drawStar(ctx, 400, 400, 300, 150, 50);
具体效果 旋转五角星
lineJoin
这个属性表示线条相交部分的形状，这个属性有3个值： miter(尖脚)(默认值) | bevel(平角) | round(圆角)
其效果如下：
1.miter
2.bevel
3.round
注意：
当设置为miter时(当然默认情况也为miter),它有个默认值的属性叫 miterLimit， 默认值为10， 如果2条线相交之后miter的值小于这个miterLimit值， 则 ctx.lineJoin = 'miter' 将自动转换成 ctx.lineJoin = 'bevel'。
miterLimit的值的计算如下
我们可以设置这个miterLimit值：
ctx.miterLimit = 20
总结
这一章主要是关于线条的一些基本属性，基本用法等。
