关于canvas线条的属性

1. 线宽

Canvas绘制线条主要的属性就是线宽，可以使用lineWidth属性指定线条的宽度。默认情况下，线宽是1像素，可以设置任意大于0的值。需要注意的是，当线宽为奇数时，线条会显示在坐标轴上，当线宽为偶数时，线条会显示在两边。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();

2. 线段末端样式

Canvas绘制线条的线段末端可以使用lineCap属性控制，可以有三种样式：butt（默认，直角），round（圆角），square（方角）。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.lineWidth = 10;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();

3. 线段连接样式

Canvas绘制连续线段的连接处可以使用lineJoin属性控制，可以有三种样式：miter（默认，尖角），round（圆角），bevel（斜角）。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.lineWidth = 10;
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();

4. 线段虚线

Canvas绘制线段可以使用setLineDash方法控制虚线样式，需要传入一个数组参数，数组元素分别表示实线长度和虚线长度，如[10, 5]表示先绘制长度为10的实线，再绘制长度为5的虚线。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.lineWidth = 5;
ctx.setLineDash([10, 5]);
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();