多用几个手机测测呢

也没不来，canvas绘图，有没有层级关系？

但是我都是循环输出的

讲道理不应该，如果是图片的话还能理解，图片需要一系列的操作，画文本应该是挺常规的。最好能发个代码片段

onLoad: function (options) {

let that = this;

let id = options.id;

var park_name = app.globalData.wxacode_title;

let fansi = wx.getStorageSync('fansi_fansi');

let activity_list = wx.getStorageSync('fansi_activity_list');

let activity_num = wx.getStorageSync('fansi_activity_num');

let food_list = wx.getStorageSync('fansi_food_list');

let food_num = wx.getStorageSync('fansi_food_num');

let region_list = wx.getStorageSync('fansi_region_list');

let region_num = wx.getStorageSync('fansi_region_num');

var select_year = wx.getStorageSync('fansi_select_year');

var select_year = select_year + '年';

let old_year = wx.getStorageSync('fansi_old_year');

old_year = old_year + '年';

let user_info = wx.getStorageSync('user_info');

let zmlxj_user_info = wx.getStorageSync('zmlxj_user_info');

//需要动态计算画板的高度

let windowWidth = 700;

let windowHeight = parseInt(region_list.length * 70) + parseInt(activity_list.length * 70) + 450;

wx.getSystemInfo({

success: function (res) {

//windowHeight = res.windowHeight + 100;

windowWidth = res.windowWidth;

that.setData({ 'windowHeight': windowHeight, 'windowWidth': windowWidth ,'fansi':fansi,'activity_list':activity_list,'activity_num':activity_num,'food_list':food_list,'food_num':food_num,'region_list':region_list,'region_num':region_num,'select_year':select_year,'old_year':old_year,'user_info':user_info,'id':id});

},

});

//获得canvas上线文

var context = wx.createCanvasContext('fansi_img');

context.setFillStyle('#c10211'); //#c10211

//整个区域的大小

context.fillRect(0, 0, windowWidth, windowHeight);

var r = 60;

var x = windowWidth / 2;

var y = 2 * r;

var d = 2 * r;

var cx = x;

var cy = r + 20;

context.save();

context.setFillStyle("white");

context.arc(cx, cy, r, 0, 2 * Math.PI);

context.clip();

context.fill();

context.setFontSize(40);

context.setFillStyle('red');//#fc9de4 red

context.setTextAlign('center');

var head_icon_height = 40 + 2 * 40 + 40;

context.fillText(old_year, windowWidth / 2, r + 30);

//绘制用户的名称

//绘制姓名

let nickName = user_info['nickName'] ? user_info['nickName'] : (zmlxj_user_info['user_nick'] ? zmlxj_user_info['user_nick'] : '');

if (nickName) {

context.setFontSize(20);

context.setFillStyle('white');//#fc9de4 white

context.setTextAlign('center');

var head_icon_height = 40 + 2 * 40 + 40;

context.fillText(nickName, windowWidth / 2, head_icon_height);

}

var park_name_height = head_icon_height + 40

var title_ = select_year + '跟着【' + park_name + '】一起自驾世界一起去过' + region_num + "个城市"+activity_num+'次活动';

var title_length = 10 * that.zh_length(title_);

console.log(windowHeight)

if (title_length > windowWidth - 80) {

//需要多行

var title_line = parseInt(title_length / windowWidth);

if (title_line == 0) {

title_line = 2;

}

else {

title_line += 1;

}

var line_length = title_length / 10 - parseInt(title_length / 10 / 2);

var index = 0;

for (var t_i = 0; t_i < title_line; t_i++) {

context.setFontSize(25);

context.setFillStyle('white');

context.setTextAlign('left');

var title_temp = utils.sub_string(title_, 0 + index, 30, '');

context.fillText(title_temp['str'], 10, park_name_height + t_i * 30);

index = title_temp['index'];

}

}

else {

//只需要一行就可以

context.setFontSize(25);

context.setFillStyle('white');

context.setTextAlign('center');

context.fillText(title_, windowWidth / 2 - that.zh_length(park_name) * 10 / 2 + 40, park_name_height);

}

var region_height = 280;

for (var i_1 = 0; i_1 < region_list.length; i_1++) {

context.setFillStyle("white");

context.setStrokeStyle('white');

context.fillRect(40, parseInt(region_height) - 40 + i_1 * 70, parseInt(windowWidth) - 80, 60);

if (region_list[i_1].is_join == 1) {

context.setFillStyle("red");

}

else {

context.setFillStyle("black");

}

context.setFontSize(20);

context.setTextAlign('left');

context.fillText(region_list[i_1].title, windowWidth / 2 - that.zh_length(region_list[i_1].title) * 10 / 2, parseInt(region_height) + i_1 * 70);

}

var activity_height = parseInt(region_height) + parseInt(region_list.length * 70);

for (var j = 0; j < activity_list.length; j++) {

context.setFillStyle("white");

context.setStrokeStyle('white');

context.fillRect(40, parseInt(activity_height) - 40 + j * 70, parseInt(windowWidth) - 80, 60);

//context.fill();

if (activity_list[j].is_join == 1) {

context.setFillStyle("red");

}

else {

context.setFillStyle("black");

}

context.setFontSize(20);

context.setTextAlign('left');

let activity_length = that.zh_length(activity_list[j].activity_name) * 10;

if (activity_length > windowWidth - 80) {

var title_temp_ = utils.sub_string(activity_list[j].activity_name, 0, 30, '');

context.fillText(title_temp_['str'], 40, parseInt(activity_height) + j * 70);

}

else {

context.fillText(activity_list[j].activity_name, windowWidth / 2 - that.zh_length(activity_list[j].activity_name) * 10 / 2, parseInt(activity_height) + j * 70);

}

}

var wxacode_height = activity_height + parseInt(activity_list.length) * 70;

//绘制二维码

if (fansi['wxacode'])

wx.downloadFile({

url: fansi['wxacode'], //仅为示例，并非真实的资源

success: function (res) {

// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容

if (res.statusCode === 200) {

context.drawImage(res.tempFilePath, (windowWidth - 150) / 2, wxacode_height, 150, 150);

context.draw(true);

}

}

});

context.draw();

},

/**

  * 生命周期函数--监听页面初次渲染完成

  */

onReady: function () {

},