Canvas基本知识点三：线条操作

一、概述

• 线条的基本属性主要有以下几种：
  

lineWidth:定义线条的宽度

lineCap:定义线帽样式

lineJoin:定义两个线条交接处的样式。

• 线条的操作方法：
  

setLineDash():定义线条的虚实样式。

二、lineWidth

语法

cxt.lineWidth = 整数复制代码

说明

属性取值为整数，默认值为1，默认单位为px。

cxt.lineWidth = 5;
cxt.moveTo(20,20);
cxt.lineTo(180,20);
cxt.stroke();

cxt.beginPath();
cxt.lineWidth = 15;
cxt.moveTo(20,70);
cxt.lineTo(180,70);
cxt.stroke();复制代码

beginPath()用于开始一条新路径，如果将其删除，则后面的直线会覆盖前面的线宽。

lineWidth属性不仅用于直线，还可以用作曲线图形，此外需要注意的是，假设线条宽度为lineWidth,则strokeRect()方法绘制的矩形实际宽度是（width+lineWidth）,实际高度为（height+lineWidth）。而arc()方法绘制的圆形实际半径为（radius+lineWidth）。

三、lineCap

语法

cxt.linecap = “属性值”复制代码

属性值：

Butt：默认值，无线帽。每条线的头部和尾部都是长方形，也就是不做任何处理。

Round:圆形线帽。每条线的头和尾都增加一个半圆，半圆的直径为线宽的长度。

Square：正方形线帽。每条线的头尾都增加一个长方形，长方形的长度为线宽的一般，高度保持线宽。

注意Round和Square会使线条稍微变长一点，因为他们给线条增加了线帽部分。

lineCap属性只对线条的开始处和结尾处这两个地方起作用，而线段和线段衔接的地方依旧是尖角。要想改变，线段与线段交接的地方，就需要用lineJoin属性了。

四、lineJoin

语法：

cxt.lineJoin = '属性值'复制代码

属性：

miter：默认值，尖角。线段在交接处延伸直至交于一点，为默认值。

round：圆角。交界处是一个圆角，圆角所在圆的直径等于线宽长度。

bevel：斜角。连接处是一个斜角，斜角所在正方形的对角线长等于线宽的长度。

在canvas中，lineCap定义线条开始和结尾的样式，而lineJoin定义的是交界处的样式。

五、setLineDash()方法

语法：

cxt.setLineDash(array)复制代码

说明：

array是一个数组组合。

数组【10，5】表示10px实线和5px空白重复拼接组合而成的线型。

【10，5，5，5】表示10px实线、5px空白、5px实线、5px空白重复拼凑组合而成的线型。

转载于:https://juejin.im/post/5b863c4a51882542d5719e49