小程序canvas画海报

注意画用户头像 参数 注意 ctx.draw()绘图

// circleImg(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();

// }

canvasImg(){

let that = this;

let poster = that.data.poster;

//canvas画海报

wx.getImageInfo({

src: poster,

success: function (res) {

console.log(res.width)

console.log(res.height)

let width = '';

let height = '';

width = res.width,

height = res.height;

that.setData({

width: res.width,

height: res.height

})

wx.downloadFile({

url: poster, //仅为示例，并非真实的资源

success: function (res) {

console.log(res, 111111);

if (res.statusCode === 200) {

// 画海报

ctx.drawImage(poster, 0, 0, width, height);

wx.downloadFile({

url: that.data.userInfo.avatarUrl,

success: function (res) {

ctx.save()

ctx.beginPath()

ctx.arc( 152, 638, 40, 0, 2 * Math.PI)

ctx.clip()

ctx.drawImage(res.tempFilePath, 112, 598, 80, 80);

ctx.closePath()

ctx.draw()

setTimeout( function () {

wx.canvasToTempFilePath({

x: 0,

y: 0,

width: width,

height: height + 30,

canvasId: 'myCanvas',

success: function (res) {

console.log(res.tempFilePath);

that.setData({

poster1: res.tempFilePath

})

}

})

}, 2000)

}

})

}

}

})

}

})

},