canvas-线的样式

线的样式在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-简版画板