HTML5 - canvas : lineJoin & arcTo

HTML

<canvas id="myCanvas" width="300" height="100"></canvas>
<canvas id="corner" width="300" height="200"></canvas>

JQuery 1.9.1

$(function(){
  var cxt=$('#myCanvas')[0].getContext('2d');
  cxt.beginPath();
  cxt.moveTo(10,90);
  cxt.lineTo(50,10);
  cxt.lineTo(90,90);
  cxt.lineCap='round';
  cxt.lineJoin='round';//圓頭
  cxt.strokeStyle="blue";
  cxt.lineWidth=10;
  cxt.stroke();
  
  cxt.beginPath();
  cxt.moveTo(110,90);
  cxt.lineTo(150,10);
  cxt.lineTo(190,90);
  cxt.lineCap='butt';
  cxt.lineJoin='miter';//尖頭
  cxt.strokeStyle="red";
  cxt.stroke();
  
  cxt.beginPath();
  cxt.moveTo(210,90);
  cxt.lineTo(250,10);
  cxt.lineTo(290,90);
  cxt.lineCap='square';
  cxt.lineJoin='bevel';//平頭
  cxt.strokeStyle="green";
  cxt.stroke();
  
  var corner=$('#corner')[0].getContext('2d');
  var rectWidth=200;
  var rectHeight=100;
  var rectX=10;
  var rectY=10;
  var radius=50;
  
  corner.beginPath();
  corner.moveTo(rectX, rectY);//起始點
  corner.lineTo(rectX + rectWidth - radius, rectY);//上橫線
  corner.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + radius, radius);//導角
  corner.lineTo(rectX + rectWidth, rectY + rectHeight);//下直線
  corner.lineWidth =10;
  corner.lineCap='round';
  corner.stroke();
});

主要使用function :

1. lineJoin - 線條線條交界處樣式。
   

   值	屬性
   round	圓頭。
   miter	預設值，尖頭。
   bevel	平頭。

   
   
2. arcTo() - 繪製線框導角用，arcTo(起始點x軸, 起始點y軸, 結束點x軸, 結束點y軸, 半徑)。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/1z8j6Lue/