lineCap

指定如何绘制每一条线段末端.[butt] | round | square;

  ctx.lineCap = 'butt';// 默认值,线段两端不处理.线段多长画出来就是多长
  ctx.lineCap = 'round';// 圆角两端,两端会多出一个圆角
  ctx.lineCap = 'square';// 方形两端,两端会多出一个矩形.高度和线宽一样,宽度是线宽一半

测验

这个属性的默认值是butt,平时画一条粗线时的效果如下图第一条线

其它两个属性,从名字看是圆和方的意思.意思线段两端是圆形和方形.

为了对比三个线段两端处的不同,所画线段长度相同,粗细相同

三个不同属性画线效果不同,同样长度的线段,画出来却不一样长.线段末端的突出部分并不算在线段长度内.

那么这个突出长度是多少呢?这个区域高度肯定与线宽一样,长度是线宽一半

如果是圆角那种的,突出长度是多少?

<<H5核心技术图形动画与游戏开发(David Geary)>> 81页

线段端点与连接点的绘制