lineJoin

用来设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)

  ctx.lineJoin = "bevel";// 在相连部分的末端填充一个额外的以三角形为底的区域, 每个部分都有各自独立的矩形拐角.
  ctx.lineJoin = "round";// 通过填充一个额外的,圆心在相连部分末端的扇形,绘制拐角的形状. 圆角的半径是线段的宽度.
  ctx.lineJoin = "miter";// 默认值 通过延伸相连部分的外边缘,使其相交于一点,形成一个额外的菱形区域.这个设置可以通过 miterLimit 属性看到效果.

round: 通过填充一个额外的,圆心在相连部分末端的扇形,绘制拐角的形状. 圆角的半径是线段的宽度.


测验

三个值,三条折线,从左到右'bevel','round','miter'

设置bevel时,接头处变平了,'round'则变圆了,'miter'为尖角,这个是默认值.不设置时就是这样

画一个矩形,边厚度为15

可以画圆角矩形

画一个5角星,边厚度为10

5角星也能变平角和圆角的

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

线段端点与连接点的绘制