代码如下：

onLoad(options) {

const height = app.globalData.window_height;

const width = app.globalData.window_width;

const options = {

    head_photo = ‘https://wx.qlogo.cn/mmopen/vi_32/N78NX78hLfDwG56Ocyyjhibqro6sFjIZmUzJM5aI90ySicyqMeRToKLImXl7v8DRVwMmVggfMzy1m15d2P5beejg/0’,

    qrcode=‘http://oixavq5ec.bkt.clouddn.com/yaliapi/1302/wechat/b07f9201804161810206895.png’

}

if (options) {

const optionsArr = Object.keys(options).filter(x => x != ‘nickname’);

optionsArr.map((x, k) => {

    if (x == ‘head_photo’ || x == ‘qrcode’) {

    this.downloadCanvasImg(x, options[x], (optionsArr.length - 1 == k ? true : false))

}

})

}

},

downloadCanvasImg(name, url, end) {

const options = immutable.fromJS(this.data.options).toJS();

wx.downloadFile({

url,

success: res => {

const urls = res.tempFilePath;

options[name] = urls;

this.setData({ options })

console.log(name, url, end, urls);

if (end) {

this.drawCanvas(this.data.options);

}

},

fail: fres => {

this.downloadCanvasImg(options, end)

}

})

},

drawCanvas(options) {

const { width, height, backgroundColor } = this.data;

const imgUrl = options.head_photo;

const qrcodeUrl = options.qrcode

const ctx = wx.createCanvasContext(‘myCanvas’);

const grd = ctx.createLinearGradient(0, 0, 0, 160)

// grd.addColorStop(0, this.colorRgb(backgroundColor))

// grd.addColorStop(.2, this.colorRgb(backgroundColor))

// grd.addColorStop(1, this.colorRgb(backgroundColor, true))

grd.addColorStop(0, ‘#16ca4e’)

grd.addColorStop(.2, ‘#16ca4e’)

grd.addColorStop(1, ‘#16ca4e’)

ctx.beginPath()

ctx.arc(width / 2, -180, width / 2 + 200, 2 * Math.PI) // height: width / 2 + 20

ctx.fillStyle = grd

ctx.fill()

ctx.closePath()

ctx.beginPath()

ctx.setFillStyle(’#ffffff’)

ctx.setTextAlign(‘center’)

ctx.setFontSize(55)

ctx.fillText(‘佣金升级’, width / 2, 80)

ctx.fillText(‘福利双赢’, width / 2, 130)

ctx.setTextAlign(‘center’)

ctx.closePath()

ctx.save()

ctx.beginPath();

ctx.setFillStyle(‘white’);

ctx.setShadow(0, 2, 5, ‘rgba(0, 0, 0, .2)’)

ctx.arc(width / 2, width / 2 + 20, 40, 0, 2 * Math.PI);

ctx.fill();

ctx.clip();

ctx.drawImage(imgUrl, width / 2 - 40, width / 2 - 20, 80, 80)

ctx.restore()

ctx.closePath()

ctx.beginPath()

ctx.arc(width / 2, 280, 50, 2 * Math.PI)

ctx.setFillStyle(‘red’)

ctx.fill()

ctx.closePath()

ctx.beginPath()

ctx.setFillStyle(’#333’)

ctx.setTextAlign(‘center’)

ctx.setFontSize(16)

ctx.fillText(‘MaobabyDad’, width / 2, width / 2 + 80)

ctx.setTextAlign(‘center’)

ctx.closePath()

ctx.beginPath()

const grd2 = ctx.createCircularGradient(width / 2, width / 2 + 195, 127)

grd2.addColorStop(0, ‘#16ca4e’)

grd2.addColorStop(.9, ‘#16ca4e’)

grd2.addColorStop(1, ‘#16ca4e’)

ctx.rect(width / 2 - 90, width / 2 + 105, 180, 180)

ctx.setFillStyle(grd2)

ctx.closePath()

ctx.beginPath()

const qrcode = ctx.drawImage(qrcodeUrl, width / 2 - 80, width / 2 + 115, 160, 160)

ctx.closePath()

ctx.beginPath()

ctx.setFillStyle(’#333’)

ctx.setTextAlign(‘center’)

ctx.setFontSize(16)

ctx.fillText(‘将海报发送给好友，赚取佣金’, width / 2, width / 2 + 330)

ctx.setTextAlign(‘center’)

ctx.closePath()

ctx.draw()

},

开发工具的效果是：

安卓（小米）机上的效果：

苹果（6sp）真机效果：