canvas循环绘制带背景的标签

项目需求  需绘制带标签的个人名片，直接上代码：

效果图

1.html

<canvas id="mDemo" width="283px" height="503px" style="background:#eee;"></canvas>

2.js

    <script>

        // 数据
        let labellist = [{
            labelcode: "901520002005",
            labelname: "认真负责"
        },
        {
            labelcode: "901520002007",
            labelname: "规划专业"
        },
        {
            labelcode: "901520002015",
            labelname: "亲切随和"
        }
        ];
        let startX = 0,
            startY = 200;

        let canvas_ = document.getElementById('mDemo');
        let ctx = canvas_.getContext('2d');

        let w = canvas_.width,
            h = canvas_.height;

        labellist.length == 3 ? startX = (w / 2) - 110 : [labellist.length == 2 ? startX = (w / 2) - 70 : startX = (w / 2) - 30]; // 不同标签个数，设置不同的起点startX(根据自己的需求自己设定)
        for (let i = 0; i < labellist.length; i++) {
            ((i) => {
                ctx.font = '12px Microsoft YaHei';
                let item = labellist[i].labelname;
                let width = ctx.measureText(item).width; //字体宽度
                let coordinates = getDrawArc(ctx, width, 3);
                ctx.fillStyle = '#fff';
                ctx.fillText(item, coordinates[0], coordinates[1]);
            })(i)
        }

        // 绘制label背景
        function getDrawArc(ctx, w, r) {
            let _this = this;
            let x = parseFloat(startX + '');
            let y = parseFloat(startY + '');
            let endX = x + w + 2 * r + 28; //标签之间的间距
            startX = endX;
            startY = y;
            ctx.beginPath();
            ctx.moveTo(x + r, y - 32); // 创建开始点
            ctx.lineTo(x + w + r, y - 32); // 创建水平线

            ctx.strokeStyle = '#FE8A00';
            ctx.arcTo(x + w + 2 * r, y - 32, x + w + 2 * r, y + r - 32, r); // 创建弧 //右上

            ctx.arcTo(x + w + 2 * r, y - 10, x + w, y - 10, r); //右下

            ctx.lineTo(x + r, y - 10);

            ctx.arcTo(x, y - 10, x, y + r - 18, r); //左下

            ctx.arcTo(x, y - 32, x + r, y - 32, r); //左上

            ctx.fillStyle = '#FE8A00';
            ctx.fill();
            ctx.stroke();
            ctx.restore(); //恢复状态
            return [x + r, y + r - 20]
        }
    </script>