Canvas 相交线的拐点样式(lineJoin())

houyanhua1

于 2018-04-10 12:47:50 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Canvas 文章标签： canvas lineJoin

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

本文介绍如何使用HTML5 Canvas的lineJoin属性来控制线条相交处的拐点样式，通过示例代码demo.html展示不同lineJoin设置下线条的视觉效果，帮助理解其在图形绘制中的应用。

摘要生成于 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.lineJoin = 'miter' 、'round'、'bevel'
        * miter是默认值，两边向外延伸相交为尖尖角，
        * round是圆头，
        * bevel两边相连为一个斜面。（磨平尖角）
        * */

        ctx.lineWidth = 10;

        // 默认交点为尖尖角
        ctx.lineJoin = 'miter';
        ctx.moveTo( 10, 10 );
        ctx.lineTo( 60, 110 );
        ctx.lineTo( 110, 10 );
        ctx.stroke();

        // 交点为圆头
        ctx.beginPath();
        ctx.lineJoin = 'round';
        ctx.moveTo( 10, 50 );
        ctx.lineTo( 60, 150 );
        ctx.lineTo( 110, 50 );