java canvas 描边,canvas-05 描边样式

影响描边样式的因素：

strokeStyle:描边的颜色

ctx.strokeStyle='maroon';

lineWidth:描边宽

ctx.lineWidth=40;

lineCap:描边端点样式

ctx.lineCap='butt'; //butt  没有端点，默认

ctx.lineCap='round';  // round 圆形端点

ctx.lineCap='square';  // square 方形端点

lineCap ：

butt

round

square

lineJoin:描边拐角类型

ctx.lineJoin='miter'; //miter 尖角 默认

ctx.lineJoin='round'; // round 圆角

ctx.lineJoin='bevel';  //  bevel 切角

lineJoin：

miter

round

bevel

miterLimit:拐角最大厚度(只适用于lineJoin=“miter”的情况) number 类型，如2,1,3

setLineDash(segments):将描边设置为虚线，可以通过getLineDash()方法获取虚线样式

/* setLineDash(segments) 虚线   一个Array数组*/

ctx.save();

ctx.beginPath();

ctx.moveTo(20, 20);

ctx.lineTo(400, 20);

ctx.setLineDash([5, 15]);

ctx.stroke();

ctx.restore();

setLineDash

虚线

lineDashOffset:虚线的偏移量

ctx.save();

ctx.beginPath();

ctx.moveTo(50,100);

ctx.lineTo(700,100);

ctx.setLineDash([60]);

ctx.stroke();

ctx.restore();

ctx.save();

ctx.beginPath();

ctx.moveTo(50,150);

ctx.lineTo(700,150);

ctx.setLineDash([60]);

ctx.lineDashOffset=-90;

ctx.stroke();

ctx.restore();

lineDashOffset