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

最新推荐文章于 2022-04-24 17:16:14 发布

houyanhua1

最新推荐文章于 2022-04-24 17:16:14 发布

阅读量2k

点赞数

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

本文链接：https://blog.csdn.net/houyanhua1/article/details/79879481

版权

demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> &am

摘要由CSDN通过智能技术生成

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';

最低0.47元/天解锁文章

houyanhua1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas 线帽(线头)的样式(lineCap())

demo.html：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &am
复制链接

扫一扫