Canvas入门范例03：Path的连接点

Canvas入门实例03：Path的连接点

本文示例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: 连接点是圆的；

三个属性对应图中的效果，很容易理解的。