canvas描边样式-miterLimit-拐角限制

书院二层楼

于 2020-11-05 16:02:57 发布

阅读量332

点赞数

分类专栏： JS canvas 文章标签： canvas miterLimit

本文链接：https://blog.csdn.net/caoxinjian423/article/details/109514184

版权

JS 同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

canvas

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas描边样式-miterLimit</title>
    <style>
        html{height: 100%;overflow: hidden;}
        body{height: 100%;margin: 0;}
        #canvas{
            background: antiquewhite;
        }
    </style>
</head>
<body>
    <canvas id="test"></canvas>
<script>
    const cvs=document.getElementById('test');
    cvs.width=window.innerWidth;
    cvs.height=window.innerHeight;

    const  ctx=cvs.getContext('2d');

    /*strokeStyle：描边的着色样式*/
    ctx.strokeStyle='maroon';

    /*lineWidth：描边宽*/
    ctx.lineWidth=60;

    /*miterLimit 拐角限制，number 类型，如2,1,3*/
    ctx.save();
    ctx.miterLimit=1;
    ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.lineTo(400,50);
    // ctx.lineTo(200,150);
    ctx.lineTo(400,150);
    ctx.stroke();
    ctx.restore();

</script>
</body>
</html>