在画布里，线条默认是黑色、宽度为 1 像素。不过这些都不是固定不变的，完全可以通过对应的方法把线条样式调出层次感。

接下来，围绕宽度、描边颜色和端点形状这三个方面，具体看看线样式该怎么设置。

线条样式设置

1. 宽度

在画布里，线条有多粗，直接由lineWidth属性来控制。

这个属性接收的是一个不带单位的数值，默认按像素来计算。比如下面这段示例代码里，设置的就是10，也就是把线宽设为10像素。

context.lineWidth='10';

2. 描边颜色

使用画布中的strokeStyle属性可以定义线的描边颜色。

该属性的取值为十六进制颜色值或颜色英文，例如下面的示例代码。

  context.strokeStyle='#f00';

  context.strokeStyle='red';

在上面的示例代码中，两种方式都可以用于设置红色，显示效果相同。

3. 端点形状

默认情况下，线的端点是方形的。

通过画布中的lineCap属性可以改变端点的形状，其基本语法格式如下。

lineCap=’属性值’

在上面的语法格式中，lineCap属性的取值有3个，具体如表1所示。

表1 lineCap属性值

表1所示属性值对应的效果如图1所示。

图 1 端点形状

《夸克》非常好用的免费AI浏览器

下载APP查看