收藏
回答

canvas绘制圆形图片 到真机上还是正方形 请问怎么解决?

用户头像到真机上就成正方形了  模拟器是圆形

var ctx = wx.createCanvasContext('canvas',this);
                wx.showLoading({
                    title: '加载中...',
                    mask: false
                });
                 
                // 背景
                ctx.drawImage(this.canvasImg, 0, 0, 300, 450);
                ctx.globalAlpha = 0.82; // 透明度
                ctx.setFillStyle('#FFF');
                ctx.fillRect(20, 60, 260, 370);
                 
                // ----------用户名----------
                console.log('用户名',this.nickname)
                ctx.setFontSize(13);
                ctx.setFillStyle('#000');
                ctx.fillText(this.nickname, 90, 110,80);
                 
                ctx.setFontSize(13);
                ctx.setFillStyle('#666');
                ctx.fillText('邀请您', 170, 110);
                 
                // ----------小程序码----------
                ctx.setFontSize(11);
                ctx.setFillStyle('#666');
                ctx.font = 'normal'
                ctx.fillText('长按保存分享', 120, 410);
                ctx.fillText('扫码进入小程序', 115, 425);
                wx.getImageInfo({
                    src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567831501629&di=f179dc5dd0c0d3f31fd3c4594f99da09&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fcq%2Ftransform%2F300%2Fw550h550%2F20180506%2FMh5--hacuuvt8578898.png',
                    success: (res) => {
                        console.log('小程序码',res.path)
                        ctx.restore();
                        ctx.drawImage(res.path, 120, 325, 65, 65);
                        // ctx.save();
                    }
                })
                 
                // ----------标题----------
                ctx.setFillStyle('#000');
                ctx.font = 'normal bold 18px sans-serif';
                textHandle(this.details.new_title, 40, 145, 220, 30);
                 
                // ----------图片--------图片路径转为本地路径
                wx.getImageInfo({
                    src: this.details.new_cover,
                    success: (res) => {
                        ctx.restore();
                        ctx.drawImage(res.path, 40, 190, 220, 100);
                        ctx.draw();
                    }
                })
                ctx.setLineDash([9, 6]);
                ctx.moveTo(43, 310);
                ctx.lineTo(260,310);
                ctx.strokeStyle="#000";
                ctx.stroke();
                // 保存当前的绘图上下文
                ctx.save();
                 
                // ----------用户头像----------
                ctx.beginPath();
                ctx.arc(150, 60, 30, 0, 2 * Math.PI, false);
                ctx.strokeStyle="#FFF";
                ctx.setLineDash([0,0]);
                ctx.lineWidth = 2;
                ctx.fillStyle = '#fff';
                ctx.stroke();
                ctx.clip();
                // 将头像路径转为本地路径
                wx.getImageInfo({
                    src: this.avatar_url,
                    success: (res) => {
                        console.log('头像',res.path)
                        ctx.drawImage(res.path, 120, 30, 60, 60);
                    }
                })



最后一次编辑于  09-07
回答关注问题邀请回答
收藏
问题标签