canvas(四)描边样式与投影

影响描边样式的元素

• strokeStyle：描边的颜色
• lineWidth：描边宽
• lineCap：描边端点样式
• lineJoin：描边拐角类型
• miterLimit：拐角最大厚度（只适用于lineJoin=‘miter’ 的情况）
• setLineDash(segments)：将描边设置为虚线，可以通过getLineDash() 方法获取虚线样式
• lineDashOffset：虚线的偏移量

lineWidth 描边宽

• lineWidth 定义描边的宽度，它是从路径的中心开始绘制的，内外各占宽度的一半

/*lineWidth：描边宽*/
ctx.lineWidth=40;

lineCap 描边端点

• ctx.lineCap='butt'; 没有端点，默认
• ctx.lineCap='round'; 圆形端点
• ctx.lineCap='square'; 方形端点
  

lineJoin 描边拐角

• ctx.lineJoin='mitter'; 尖角
• ctx.lineJoin='round'; 圆角
• ctx.lineJoin='bevel'; 切角
  

miterLimit 拐角最大厚度

• lineJoin 为miter 时，若拐角过小，拐角的厚度就会过大。
  
• ctx.miterLimit=1 后，可避免此问题
  

setLineDash(segments) 虚线

• ctx.setLineDash([ 60, 90 ]);
  

• ctx.setLineDash([ 60, 90, 120 ]);
  

lineDashOffset 虚线偏移

ctx.setLineDash([ 60, 90 ]);
ctx.lineDashOffset=0

ctx.setLineDash([ 60, 90 ]);
ctx.lineDashOffset=-60

ctx.setLineDash([ 60, 90 ]);
ctx.lineDashOffset=-150

投影

• 偏移位置：
  • shadowOffsetX = float
  • shadowOffsetY = float
• 模糊度：
  • shadowBlur = float
• 颜色：
  • shadowColor = color

投影是上下文对象的一种属性，在绘制图形时，无论执行的是描边方法，还是填充方法，都会在其所绘图形的后面添加投影。

在绘制描边图形和填充图形的时候，都需要执行相应的方法，比如路径的fill() 、stroke() 方法。
而绘制投影时，则不需要任何方法，只要设置相应属性即可，这样在之后绘制图形的时候都会自带投影，无论这个图形是描边图形还是填充图形。