HTML canvas lineCap 属性

在 HTML5 中，Canvas 元素是一个非常强大的工具，可以用来绘制各种图形，包括直线。在绘制直线时，我们可以通过设置 lineCap 属性来控制线条的端点样式。lineCap 属性有三种取值：butt、round 和 square，分别代表不同的线条端点样式。

lineCap 属性取值

• butt：默认值，线条的端点为方形，不会超出线条边界。
• round：线条的端点为圆形，会超出线条边界。
• square：线条的端点为方形，会超出线条边界，并且在端点处增加一个与线条宽度相同的矩形。

使用示例

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Canvas lineCap 属性示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");

        // 设置线条样式为 round
        ctx.lineWidth = 10;
        ctx.lineCap = "round";
        ctx.beginPath();
        ctx.moveTo(20, 20);
        ctx.lineTo(180, 20);
        ctx.stroke();

        // 设置线条样式为 square
        ctx.lineWidth = 10;
        ctx.lineCap = "square";
        ctx.beginPath();
        ctx.moveTo(20, 50);
        ctx.lineTo(180, 50);
        ctx.stroke();

        // 默认线条样式为 butt
        ctx.lineWidth = 10;
        ctx.beginPath();
        ctx.moveTo(20, 80);
        ctx.lineTo(180, 80);
        ctx.stroke();
    </script>
</body>
</html>

在上面的示例中，我们创建了一个 Canvas 元素，并通过设置 lineCap 属性为 round 和 square，分别绘制了具有不同线条端点样式的直线。最后一个直线没有设置 lineCap 属性，因此使用默认的 butt 样式。

通过控制 lineCap 属性，我们可以实现更加多样化的线条绘制效果，使得绘制的图形更加生动和有趣。希望本篇文章对你有所帮助！