利用canvas画圆形图片，但是图片就是不展示，代码如下，希望能帮我解决一下，挺急的

Page({

data:{

image: {

src: 'https://wx.qlogo.cn/mmopen/vi_32/eANbKH1RvLW088qRtM96QLWWkgysk4T2TErm4F0lHcnhu2txL6Kk0PJokrxT4TLUmEtAZ2xqtxwTRIPWoZZ9RQ/132',

width: 50,

heigth: 50

},

title: '杨瑞',

post:'前端开发',

phone: '18860459222',

adress:'合肥市包河区滨湖新区滨湖世纪城临滨B座',

readCard:'查看名片',

width:100

},

fillRoundRect:function (cxt, x, y, width, height, radius, /*optional*/ fillColor) {

//圆的直径必然要小于矩形的宽高          

if(2 * radius > width || 2 * radius > height) { return false; }

cxt.save();

cxt.translate(x, y);

//绘制圆角矩形的各个边  

this.drawRoundRectPath(cxt, width, height, radius);

cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值  

cxt.fill();

cxt.restore();

},

canvasIdErrorCallback: function (e) {

console.error(e.detail.errMsg)

},

drawRoundRectPath:function (cxt, width, height, radius) {

cxt.beginPath(0);

//从右下角顺时针绘制，弧度从0到1/2PI  

cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

//矩形下边线  

cxt.lineTo(radius, height);

//左下角圆弧，弧度从1/2PI到PI  

cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

//矩形左边线  

cxt.lineTo(0, radius);

//左上角圆弧，弧度从PI到3/2PI  

cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);

//上边线  

cxt.lineTo(width - radius, 0);

//右上角圆弧  

cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);

//右边线  

cxt.lineTo(width, height - radius);

cxt.closePath();

},

// Canvas居中写字，参数（context对象，要写的字，字体，颜色，绘制的高度）

canvas_text:function (_paint, _text, _fontSzie, _color, _height) {

_paint.font = _fontSzie;

_paint.fillStyle = _color;

_paint.textAlign = "center";

_paint.textBaseline = "middle";

_paint.fillText(_text, this.data.width/2, _height);

},

// downloadFile封装一个异步

getGoodsImgPath: function () {

return new Promise((success, fail) => {

if (this.data.image.src) {

success(this.data.image.src);

} else {

wx.downloadFile({

src: this.data.image.src,

success: res => {

this.setData({

'image.src': res.path

})

// image = res.path

success(res.path);

},

fail: res => {

fail(res);

}

})

}

});

},

// 圆形图片

circleImg: function (ctx, img, x, y, r) {

ctx.save()

var d = 2 * r;

var cx = x + r;

var cy = y + r;

ctx.arc(cx, cy, r, 0, 2 * Math.PI);

ctx.clip();

ctx.drawImage(img, x, y, d, d);

ctx.restore()

},

onReady: function (e) {

let that = this

// 使用 wx.createContext 获取绘图上下文 context

var context = wx.createCanvasContext('firstCanvas')

console.log(context.measureText(that.data.readCard).width)

this.getGoodsImgPath().then((res) => {

console.log(that.data.image.src)

context.fillStyle = "#f9c6cf";

context.fillRect(0, 0, 360, 300);

context.beginPath();

//绘制并填充一个圆角矩形  

that.fillRoundRect(context, 10, 10, 340, 170, 10, 'rgba(255,255,255,1)');

context.setFillStyle('#000');

context.setFontSize(14);

// context.textAlign = 'center';

context.fillText("12566", 30, 40);

context.save();

context.restore();

context.setFontSize(20);

context.fillText(that.data.title, 30, 77)

context.save();

context.restore();

context.setFontSize(14);

context.fillText(that.data.post, 30, 100)

context.save();

context.restore();

context.setFontSize(14);

context.fillText(that.data.phone, 30, 130)

context.save();

context.restore();

context.setFontSize(14);

context.fillText(that.data.adress, 30, 150)

context.save();

context.restore();

// 绘制圆形

context.save(); // 先保存状态 已便于画完圆再用

context.beginPath(); //开始绘制

//先画个圆

context.arc(100, 75, 20, 0, 2 * Math.PI);

context.clip();//画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内

that.circleImg(context, that.data.image.src, 28, 28, 36) // (canvas对象，二维码图片本地路径(如果是网络图片先用wx.downloadFile存本地)，坐标x, 坐标y, 半径)    

context.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制

that.fillRoundRect(context, 10, 200, 100, 40, 8, '#ff0000');

// 绘制中文字示例，参数（context对象，要写的字，字体，颜色，绘制的高度）

that.canvas_text(context, that.data.readCard, "16px bold 黑体", "#fff", 220);

context.save();

context.restore();

context.draw()

});

}

})