canvas绘制微信海报分享，前端开发进大厂面试必备技能

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