小程序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)
}
})
}
}
})
}
})
},

猜你喜欢

转载自blog.csdn.net/webzrh/article/details/80289985
今日推荐