画布如何绘制多行文字 - WXOPEN Club | 微信小程序专业社区

想要做出一个贺卡，用户能够自己输入文字，然后通过拉伸和movable-view的缩放自己确定大小和位置。但是发现之后无法绘制在canvas上，因为canvas不支持文字换行。

canvas支持写入文字换行。

针对canvas问题超出有效区域仍然不能换行，今天真好有空封装了一个字符串宽度切割的函数，希望能帮助到你；

//str 字符串 width 单文字宽度 max_width 最大宽度 level 等级 suffix 后缀

function sub_str(str, width, max_width,level,suffix){

var temp_str = str;

var new_str_obj = [];

for(var j = 0;j < level ; j++){

var text_arr = temp_str.split('');

for (var i = 1; i <= text_arr.length; i++) {

if (text_arr.length * width < max_width) {

new_str_obj[j] = temp_str

temp_str = '';

break;

}else if (i * width <= max_width && (i + 1) * width > max_width){

var sub_str = temp_str.substring(0, i);

if (suffix&&level == j+1)

new_str_obj[j] = sub_str + suffix;

else

new_str_obj[j] = sub_str

temp_str = temp_str.substring(i);

}

return new_str_obj;

}

在canvas中使用时候要用先测量每个字占用多少px，字体发小不一样占用的px就不同。

//单个字体占位距离

var solo_width = ctx.measureText('测').width

var sub_str = '欢迎你呀';

//文字域最大宽度单位px

const width_max = '50';

var sub_str = sub_str(addr,solo_width,width_max,5,'...');

ctx.fillStyle = '#5a6373';

for(var i in sub_str){

var height = 172 + i * solo_width

ctx.fillText(sub_str[i], 23, height)

}

measureText，长了就换行，需要自己计算一下下呢