Canvas 线帽(线头)的样式(lineCap())

最新推荐文章于 2025-07-05 16:58:33 发布

houyanhua1

最新推荐文章于 2025-07-05 16:58:33 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Canvas 文章标签： canvas 线帽 lineCap

本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/79879481

Canvas 专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了HTML5 Canvas中的lineCap属性，用于设置线条末端的样式，包括但不限于'butt'、'round'和'square'三种类型。通过实例代码演示了不同线帽样式的效果，帮助开发者更好地理解和应用这一特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        /*
        * 设置线帽样式：
        * ctx.lineCap = 'butt' 、'round'、'square'
        * butt是默认值，
        * round线头是圆的，
        * square线头两端各增加线宽的一半。
        * */

        ctx.lineWidth = 10;

        // 默认线头
        ctx.moveTo( 10, 10 );
        ctx.lineTo( 310, 10 );
        ctx.stroke();

        // 圆线头，两端的圆半径为线宽的一半
        ctx.beginPath();
        ctx.lineCap = 'round';
        ctx.moveTo( 10, 30 );
        ctx.lineTo( 310, 30 );
        ctx.stroke();

        // 增长线头，两端各增长线宽的一半(可以解决端点的锯齿)
        ctx.beginPath();
        ctx.lineCap = 'square';
        ctx.moveTo( 10, 50 );
        ctx.lineTo( 310, 50 );
        ctx.stroke();
    </script>
</body>
</html>