问题模块
教程反馈

画布里如果超出一张图片 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()


},

微信小程序开发问题解答