lineCap

lineCap (线帽?)的值决定了线段端点显示的样子。它可以为下面的三种的其中之一:butt,round 和 square。默认是 butt。"round" 和 "square" 会使线条略微变长。

  • butt 默认值,末端为方形,实际上什么也没增加。
  • round 线段末端添加半圆, 这个半圆的半径为线宽(lineWidth)的一半。
  • square 增加一个小矩形到末端,矩形的宽为线宽(=lineWidth),高度为线宽的一半(=1/2*lineWidth)。

demo:

<!DOCTYPE html>
<html>
    <head>
        <title>canvas lienCap</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="js/jquery.min.js"></script>
    </head>
    <body>
        <canvas id="my_canvas" width="1200" height="1200" style="margin:0px auto;border:1px solid #ccc;display: block;">
           
        </canvas>
    </body>
    <script type='text/javascript'>
       

        $(function (){
            var c=document.getElementById("my_canvas");
            var ctx=c.getContext("2d");
     
            ctx.lineWidth = 20;
           
            ctx.beginPath();
            ctx.strokeStyle = 'red';
            ctx.moveTo(100, 100);
            ctx.lineTo(500, 100);
            ctx.lineCap = "butt"; //线段端点的样式
            ctx.stroke();
            
            ctx.beginPath();
            ctx.strokeStyle = 'purple';
            ctx.moveTo(100, 150);
            ctx.lineTo(500, 150);
            ctx.lineCap = "round"; //线段端点的样式
            ctx.stroke();
            
            ctx.beginPath();
            ctx.strokeStyle = 'blue';
            ctx.moveTo(100, 200);
            ctx.lineTo(500, 200);
            ctx.lineCap = "square"; //线段端点的样式
            ctx.stroke();
        });
    </script>
</html>

如图所示:

canvas lineCap

lineJoin

同一个路径内,设定线条与线条间接合处的样式。共有3个值 round(圆角)、bevel(斜角)、miter(尖角),默认值是miter。

canvas lineJoin

渝ICP备20006974号-2