本文示例path联线之间的拐点样式。
function drawScreen(){ var context = theCanvas.getContext('2d'); context.strokeStyle = '#000000'; context.lineWidth = 20; context.lineJoin = 'miter'; context.beginPath(); context.moveTo(20, 10); context.lineTo(80, 10); context.lineTo(80, 70); context.stroke(); context.closePath(); context.lineJoin = 'bevel'; context.beginPath(); context.moveTo(100, 10); context.lineTo(160, 10); context.lineTo(160, 70); context.stroke(); context.closePath(); context.lineJoin = 'round'; context.beginPath(); context.moveTo(180, 10); context.lineTo(240, 10); context.lineTo(240, 70); context.stroke(); context.closePath(); }
lineJoin 属性用来描述path的连接情况,共有三个可选值:
miter: (默认) 连接点是平的;
bevel: 连接点是斜线;
round: 连接点是圆的;
三个属性对应图中的效果,很容易理解的。