利用canvas画圆形图片，但是图片就是不展示，代码如下，希望能帮我解决一下，挺急的
Page({
data:{
image: {
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()
});
}
})
强力驱动