线段样式

线段两端的样式

lineCap = ‘butt/squa**re/round’
线段两端的样式
butt **默认样式

    <canvas id="canvas" width="500" height="500" style="width: 500px; height: 500px; border: 1ex solid black;"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.lineWidth = 15;
        ctx.moveTo(100,100);
        ctx.lineTo(200,100)
        ctx.lineCap = 'butt'; // square  线段末端以方形结束,会为其添加一个正方形 round 线段末端以圆形结束
        ctx.stroke()
    </script>

效果
butt 默认样式 square 线段末端以方形结束,会为其**两端添加一个正方形 round 线段末端以圆形结束**

线段相交的样式

lineJoin = ‘miter/rou**nd/bevel’
两线相交后的样式
miterLimit = num**ber
两线相交从何**处截断**

    <canvas id="canvas" width="500" height="500" style="width: 500px; height: 500px; border: 1ex solid black;"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.lineWidth = 15;
        ctx.moveTo(100,100);
        ctx.lineTo(200,100)
        ctx.lineTo(100,150);
        ctx.lineJoin = 'miter' //round  两线相交一圆形结束   bevel 两线相交截断 
        ctx.miterLimit = 5; // 两线相交从何处截断
        ctx.stroke()
    </script>

miter 默认样式 bevel 两线相**交截断 round 两线相交以圆形结束

miterLimit 两线相交从何处截断**

    <canvas id="canvas" width="500" height="500" style="width: 500px; height: 500px; border: 1ex solid black;"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.lineWidth = 15;
        ctx.moveTo(100,100);
        ctx.lineTo(200,100)
        ctx.lineTo(100,150);
        ctx.miterLimit = 3; // 两线相交从何处截断
        ctx.stroke()
    </script>

正常情况 ctx.miterLi**mit = 3
**