上文，写完弧度与贝塞尔曲线，本文主要是关于线条的样式设置

lineWidth: 设置线条的宽度，值是一个数值，如lineWidth = 5.

画3条不同宽度的线条：

1  9 36 37 38     
     39 

 

 lineWidth设置弧形的宽度：

1  9 19 20 21     
     22 

这段圆弧设置了lineWidth, 那么他的半径就等于lineWidth + 原来的半径

lineCap设置线条开始与结尾的线帽样式，有3个值

1，butt: 这是默认值，不加任何样式

2，round: 圆形

3，square: 正方形

1  9 49 50 51     
     52 

 

 如果设置了线帽的样式( square, round )，线条就会加长，长出了多少？我在图中作了两条参考线，线条两边多出来的长度是线宽的一半。着这里就是 50，就是lineWidth=100的一半.

利用 lineWidth和lineCap属性写一个字母Z

1  9 23 24 25     
     26 

你会发现，只有两个地方有lineCap样式，线的开始点和结束点。线条的连接处并没有加上lineCap样式

canvas为我们提供了lineJoin方法，可以设置线的连接处的样式，有3个值:

miter: 默认值，尖角

round: 圆角

bevel: 斜角

1 oGc.lineWidth = 30;2 oGc.lineCap = 'round';3 oGc.lineJoin = 'round';4 oGc.moveTo( 100, 100 ); 5 oGc.lineTo( 300, 100 );6 oGc.lineTo( 100, 300 );7 oGc.lineTo( 300, 300 );8 oGc.stroke();

加上lineJoin = 'round' 就会变成圆角效果:

miter效果：

bevel效果

 

画虚线：

我们之前用moveTo, lineTo画的都是实线，canvas为我们提供了setLineDash()方法，它可以用来画虚线:

用法：

cxt.setLineDash( 数组 )

参数中这个数组，是由实线和空白组合合成，如：

[ 20, 5 ]: 20px 实线，5px空白

[ 20, 5, 10, 5]: 20px实线，5px空白, 10px实线, 5px空白

重复拼凑组合而成的线型.

1  9 35 36 37     
     38