微信小程序canvas 多图叠加切圆角

weixin_42575075

已于 2022-07-22 11:06:13 修改

阅读量956

点赞数

文章标签：前端

于 2022-07-22 10:59:54 首次发布

本文链接：https://blog.csdn.net/weixin_42575075/article/details/125927818

版权

// 画圆角

    roundRect(ctx, x, y, w, h, r) {

        var min_size = Math.min(w, h);

        if (r > min_size / 2) r = min_size / 2;

        // 开始绘制

        ctx.beginPath();

        ctx.moveTo(x + r, y);

        ctx.arcTo(x + w, y, x + w, y + h, r);

        ctx.arcTo(x + w, y + h, x, y + h, r);

        ctx.arcTo(x, y + h, x, y, r);

        ctx.arcTo(x, y, x + w, y, r);

        ctx.closePath();

        return ctx;

    },

// 需要切圆角的头像
                const ctx = canvas.getContext('2d')
                const avatar = canvas.createImage();
                avatar.src = 'https://img1.baidu.com/it/u=3083309252,921836114&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658509200&t=c9387884f27707bd340073778d6c17cc';
                avatar.onload = () => {
                    // 创建图片纹理
                    ctx.save()
                    this.roundRect(ctx, this.data.textObj.avatarIconX, this.data.textObj.avatarIconY, 50, 50, 7) 
                    ctx.clip()
                    ctx.drawImage(avatar, this.data.textObj.avatarIconX, this.data.textObj.avatarIconY, 50, 50);
                    ctx.restore()
                }