HTML5 canvas 中的線條樣式

線條樣式屬性
lineCap        設置或返回線條的結束端點樣式
butt         默認。向線條的每個末端添加平直的邊緣。
round         向線條的每個末端添加圓形線帽。
square         向線條的每個末端添加正方形線帽。

lineJoin        設置或返回兩條線相交時，所創建的拐角類型
bevel         創建斜角。
round         創建圓角。
miter         默認。創建尖角。

lineWidth        設置或返回當前的線條寬度
number         當前線條的寬度，以像素計

miterLimit        設置或返回最大斜接長度
number         正數。規定最大斜接長度。
                   如果斜接長度超過 miterLimit 的值，邊角會以 lineJoin 的 "bevel" 類型來顯示。

    <canvas id="c" width="500" height="450" style="border:1px solid #000"></canvas>
    <script type="text/javascript">
    var a=document.getElementById("c");
    var ctx=a.getContext("2d");
    ctx.beginPath();                //起始一條路徑，或重置當前路徑
    ctx.moveTo(20,20);                //把路徑移動到畫布中的指定點，不創建線條
    ctx.lineTo(200,20);                //添加一個新點，然后在畫布中創建從該點到最后指定點的線條
    ctx.lineWidth=5;                //設置或返回當前的線條寬度
    ctx.lineCap="round";        //向線條的每個末端添加圓形線帽。
    ctx.strokeStyle="green";
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(20,40);
    ctx.lineTo(200,40);
    ctx.lineWidth=5;                //設置或返回當前的線條寬度
    ctx.lineCap="butt";                //默認。向線條的每個末端添加平直的邊緣。
    ctx.strokeStyle="blue";
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(20,60);
    ctx.lineTo(200,60);
    ctx.lineWidth=5;                        //設置或返回當前的線條寬度
    ctx.lineCap="square";                //向線條的每個末端添加正方形線帽。
    ctx.strokeStyle="yellow";
    ctx.stroke();

    ctx.beginPath();
    ctx.lineJoin="round";        //設置或返回兩條線相交時，所創建的拐角類型
    ctx.moveTo(20,80);
    ctx.lineTo(50,100);
    ctx.lineTo(20,120);
    ctx.lineWidth=20;
    ctx.strokeStyle="red";
    ctx.stroke();

    ctx.beginPath();
    ctx.lineJoin="bevel";
    ctx.moveTo(120,80);
    ctx.lineTo(150,100);
    ctx.lineTo(120,120);
    ctx.lineWidth=20;
    ctx.strokeStyle="red";
    ctx.stroke();

    ctx.beginPath();
    ctx.lineJoin="miter";
    ctx.moveTo(220,80);
    ctx.lineTo(250,100);
    ctx.lineTo(220,120);
    ctx.lineWidth=20;
    ctx.strokeStyle="red";
    ctx.stroke();

    ctx.beginPath();
    ctx.lineWidth=10;
    ctx.lineJoin="miter";
    ctx.miterLimit=5;        //設置或返回最大斜接長度,斜接長度指的是在兩條線交匯處內角和外角之間的距離
    ctx.moveTo(20,150);
    ctx.lineTo(50,157);
    ctx.lineTo(20,164);
    ctx.stroke();
    </script>