线的样式在canvas中分为轮廓颜色、以及线型的样式
一、轮廓颜色
strokeStyle = color; // 设置描边轮廓的颜色
二、线型样式
1、线的宽度
lineWidth = number;
2、线帽的样式
ctx.lineCap = 'butt'; // 默认 正常
属性值:
round: 多出半圆
square: 多出方形
ctx.lineWidth = 20;
ctx.strokeStyle = 'red';
// 线帽： 线的两端的样式
// butt
ctx.beginPath();
ctx.lineCap = 'butt'; // 默认
ctx.moveTo(50, 100);
ctx.lineTo(50, 400);
ctx.stroke();
// round：会多出半圆
ctx.beginPath();
ctx.lineCap = 'round';
ctx.moveTo(150, 100);
ctx.lineTo(150, 400);
ctx.stroke();
// square: 会多出方形
ctx.beginPath();
ctx.lineCap = 'square';
ctx.moveTo(250, 100);
ctx.lineTo(250, 400);
ctx.stroke();
// 黄色的线
ctx.lineWidth = 2;
ctx.strokeStyle = 'yellow';
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(400, 100);
ctx.moveTo(0, 400);
ctx.lineTo(400, 400);
ctx.stroke();
线帽效果图：
image.png
利用多出一点点的特性我们可以看看在闭合路径时可以做点什么
栗子： 来个箭头
// 箭头
ctx.beginPath();
ctx.lineWidth = 6;
ctx.strokeStyle = 'blue';
线帽使用的是***
ctx.lineCap = 'square';
// 起始点
ctx.moveTo(100, 200);
ctx.lineTo(250, 200);
ctx.lineTo(250, 150);
// 角>
ctx.lineTo(350, 250);
ctx.lineTo(250, 350);
ctx.lineTo(250, 300);
// 结束点
ctx.lineTo(100, 300);
ctx.stroke();
当前效果：
image.png
问题来了： 箭头为什么没有闭合路径，如何闭合路径
// 第一种 添加最后一个结束点
ctx.lineTo(100, 200);
ctx.stroke();
// 第二种 闭合路径
ctx.closePath();
ctx.stroke();
此时我们使用的线帽为square：以上两种方法，闭合路径后完美连接在一起
image.png
如果是默认线帽butt呢?
1、在使用closePath()方式闭合是完美连接在一起的(我就不贴图了)
2、使用lineTo()，出现了问题：缺了一小块
image.png
看过效果之后，不想自己验证一下吗？
三、线的交点
ctx.lineJoin = 'miter '; // 默认 尖角
设置内角与外角距离
ctx.miterLimit = 10; 默认值（
当使用miter作为线条的连接时，所产生的内角与外角最大的默认值，一旦超过默认值，就会变成bevel
图片来源于： 菜鸟教程
内角与外角的距离
内角与外角距离超过默认值，变成bevel
image.png
ctx.lineJoin = 'bevel'; // 斜接
image.png
ctx.lineJoin = 'round'; // 圆角
image.png
canvas-简版画板