文末
技术是没有终点的，也是学不完的，最重要的是活着、不秃。
零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。
最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。
高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。
技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。
拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！
.generate-qorcode-container .save-btn-box {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.generate-qorcode-container .save-btn-box .save-btn {
width: 300rpx;
height: 60rpx;
line-height: 60rpx;
font-size: 25rpx;
border-radius: 8rpx;
text-align: center;
color: #fff;
background: -webkit-linear-gradient(left, #4a9eff, #24c1ff);
}
这里我们为了让加载可以居中，使用了position：relative属性，并且top/bottom/left/right均为0 ，这样可以在父元素未定宽高的情况下居中，并且使用了z-index,将整个loading，置于画面之上。
2.4 最终效果
3 核心代码
3.1 定义所需数据
「背景图片」 「logo」 「二维码」 「设备的图片像素比」 「是否加载中」 「canvs的宽」 「canvas的高」
data: {
bgImg: '/resources/images/bg.png',
logoImg :'/resources/images/juejin.png',
QRCodeImg :'/resources/images/qrcode.png',
pixelRatio: 2,
loading: false,
canvasW:0,
canvasH:0
},
3.2 初始化数据
通过微信官方提供的getSystemInfo方法，获取手机的图片像素比，屏幕的宽高，图片像素比在进行海报下载的时候会用到，主要是用来优化图片的像素，显示的更加清晰。
// 在组件完全初始化完毕
attached() {
let that = this
// 进入页面，出现开始加载的画面
that.setData({
loading: true,
})
// 获取设备宽度，计算canvas宽高
wx.getSystemInfo({
success: function (res) {
// 这里没有设置canvas的宽高为100%
that.setData({
pixelRatio: res.pixelRatio, // 图片像素比
canvasW:res.screenWidth * 0.8,
canvasH:res.screenWidth * 0.8 *1.3
})
}
})
},
3.3 开始绘制
获取canvas对象
let that = this
const ctx = wx.createCanvasContext('qrcodeCanvas', that)
绘制背景图片
ctx.drawImage(that.data.bgImg, 0, 0, that.data.canvasW, that.data.canvasH)
效果
绘制二维码下面的白底
首先找出各个顶点的位置， 为了好看，使用arcTo函数加上一点圆角。半径为5。
// 设定起始位置,宽高
let rect = {
x: ( that.data.canvasW-(that.data.canvasW*0.7))/2,
y:100,
width: that.data.canvasW*0.7,
height: that.data.canvasW*0.7 *1.2
}
// 计算各个位置的坐标
let ptA = that.point(rect.x + 5, rect.y)
let ptB = that.point(rect.x + rect.width, rect.y)
let ptC = that.point(rect.x + rect.width, rect.y + rect.height)
let ptD = that.point(rect.x, rect.y + rect.height)
let ptE = that.point(rect.x, rect.y)
// 按照坐标开始绘制
ctx.beginPath()
ctx.moveTo(ptA.x, ptA.y)
ctx.arcTo(ptB.x, ptB.y, ptC.x, ptC.y, 5)
ctx.arcTo(ptC.x, ptC.y, ptD.x, ptD.y, 5)
ctx.arcTo(ptD.x, ptD.y, ptE.x, ptE.y, 5)
ctx.arcTo(ptE.x, ptE.y, ptA.x, ptA.y, )
// 填充颜色,保存画笔位置
ctx.strokeStyle = "#fff"
ctx.stroke()
ctx.setFillStyle('#fff')
ctx.fill()
ctx.save()
//辅助函数
point(x, y) {
return {
x,
y
}
},
效果
绘制logo框
这里主要是用到了两个圆，一个大一个小，半径相差1，这样头像就有了边框。
绘制大圆
ctx.beginPath()
ctx.arc(that.data.canvasW/2, 100,35, 0, Math.PI * 2, false)
ctx.setFillStyle('#eee')
ctx.fill()
ctx.save()
绘制小圆 这里绘制小圆之后， 使用clip方法 ，使得之后的绘图都会被限制在被剪切的区域内。
// 画小圆
ctx.beginPath()
ctx.arc(that.data.canvasW/2, 100,34, 0, Math.PI * 2, false)
ctx.setFillStyle('#fff')
ctx.fill()
ctx.clip()
绘制logo图片
ctx.drawImage(
that.data.logoImg,
that.data.canvasW / 2 - 34,
66,
68,
68
)
// 恢复画布
ctx.restore()
效果
绘制二维码
// 绘制二维码
ctx.drawImage(that.data.QRCodeImg,( that.data.canvasW -140 )/2,150, 140, 140)
// 说明文字
ctx.setTextAlign('center')
ctx.setFontSize(14)
ctx.setFillStyle('#666')
console.log(( that.data.canvasW -140 )/2)
ctx.fillText('长按小程序码，查看详情', that.data.canvasW-150 , 320)
效果
关闭加载动画
ctx.draw(true, () => {
that.setData({
loading: false
})
})
总结
至此使用canvas绘制海报的流程已经结束了，总体看来还是比较简单的，难一点的地方就是具体坐标的计算，建议大家在草稿纸上画个草图，方便计算坐标。
下面就开始实现用户下载的功能。
4. 两步走下载图片
4.1 canvasToTempFilePath
// 保存图片
save() {
let that = this
wx.canvasToTempFilePath({
x: 0, // 起点横坐标
y: 0, // 起点纵坐标
width: that.data.canvasW,
height: that.data.canvasH,
destWidth: that.data.canvasW * that.data.pixelRatio,
destHeight: that.data.canvasH * that.data.pixelRatio,
canvasId: 'qrcodeCanvas',
success: function (res) {
//调取小程序当中获取图片
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({
title: '图片保存成功！',
icon: 'none'
})
},
fail: function (res) {
console.log(res)
if (res.errMsg === "saveImageToPhotosAlbum:fail auth deny" || res.errMsg === "saveImageToPhotosAlbum:fail:auth denied") {
that.doAuth()
}
}
})
},
fail: function (res) {
console.log(res)
}
}, this)
},
4.2 获取保存图片的权限
step1: 弹出授权对话框
文末
技术是没有终点的，也是学不完的，最重要的是活着、不秃。
零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。
最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。
高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。
技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。
拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！
