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

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