画布里如果超出一张图片  clip裁剪图片效果失效   如果只有一张图片  裁剪可以使用  超出一张就GG了

教程也没有说明

canvas: function (e) {

var that = this

var width = 0

var height = 0

var user_img = that.data.user_img

// 用户名字

var user_name = wx.getStorageSync('userInfo').name

console.log(that.data.poster)

// 活动

var activity = that.data.activity

wx.getSystemInfo({

success: res => {

console.log(res)

width = res.windowWidth

height = res.windowHeight

that.setData({

width: res.windowWidth,

height: res.windowHeight - 50

})

}

})

console.log('可使用的宽度为' + width + 'px')

console.log('可使用的高度为' + height + 'px')

// 宽度比例

var ratio = width / 1080

ratio = ratio.toFixed(2)

// 白色背景

var white_back = 200 * ratio

// 背景图片高度

var image_width = width

var image_height = 320 * ratio

// 用户logo

var user_logo = 110 * ratio

var user_height = 325 * ratio

var info = 409 * ratio

// 标签高度

var biaoqian = 720 * ratio

var biaoqian_text = 780 * ratio

// 名字高度

var name_height = 410 * ratio

// 活动信息

var ac_name = 990 * ratio

var ac_address = 1150 * ratio

var ac_time = 1310 * ratio

// 二维码

var code_text = 610 * ratio

var code_height = 600 * ratio

var inte_height = 550 * ratio

// 二维码高度

var poster_width = 300 * ratio

var poster_height = 250 * ratio

// 图片的自身宽高

var acti_logo_width = poster_width*0.45

var acti_logo_hei = poster_height + poster_width * 0.27

// 计算裁剪位置

var cutting_right = code_text + 10 + acti_logo_width

var cutting_height = poster_height

// 图片宽度

var img_width = that.data.img_width

var img_height = that.data.img_height

var proportion = img_height / img_width

if (img_width < width) {

img_width = width

var img_wid = width * proportion

var img_cut = img_height - 300

img_cut = img_cut / 2

var img_left = img_width - width

img_left = img_left / 2

} else {

var img_left = img_width - width

img_left = img_left / 2

if (img_height > 300) {

var img_cut = img_height - 300

img_cut = img_cut / 2

} else {

var img_cut = 0

}

}

var ctx = wx.createCanvasContext('firstCanvas')

ctx.setFillStyle('#fff')

ctx.rect(0, 0, width, height)

ctx.setFillStyle('#f9f9f9')

ctx.fill()

var code = 1140 / 939

var code_width = width - 40

ctx.drawImage(that.data.acti_logo, img_left, img_cut, width, 250, 0, 0, width, 200)

ctx.drawImage('../img/canvas.png', 20, white_back, code_width, code_width * code)

ctx.drawImage('../img/biaoqian.png', 20, biaoqian)

ctx.fillStyle = "#333";

ctx.setFontSize(18)

ctx.fillText(user_name, 40, name_height);

ctx.fillStyle = "#f66925";

ctx.setFontSize(12)

ctx.fillText('邀请你一起来参加这个活动', 40, inte_height);

ctx.drawImage(that.data.poster, code_text + 10, poster_height, poster_width, poster_width)

ctx.fillStyle = "#000";

ctx.setFontSize(14)

ctx.fillText('长按识别二维码查看', code_text, code_height);

ctx.fillStyle = "#fff";

ctx.setFontSize(14)

ctx.fillText('活动信息', 30, biaoqian_text)

ctx.fillStyle = "#000";

ctx.setFontSize(15)

ctx.fillText(activity.title, 50, ac_name);

ctx.fillText(activity.address, 50, ac_address);

ctx.fillText(activity.start_time + '——' + activity.end_time, 50, ac_time);

ctx.save()

ctx.beginPath()

ctx.arc(320, 300, 40, 0, 2 * Math.PI)

ctx.clip()

ctx.setFillStyle('#000000')

ctx.fill()

ctx.drawImage(that.data.acti_logo, 280, 260, 80, 80)

ctx.restore()

ctx.draw()

},