关键步骤介绍:
text为需要绘制的文本,通过换行符将text分割为words数组。
basic_height为第一行文本的高度。
get_canvas_row函数根据行宽限制将输入文本转化为不同的行,实现见下文。
text_size为设置的文本高度,h+text_size*j为每行待绘制文本的高度,绘制完成后更新h。
javascript
var words = text.split('\n')
var h = basic_height
for(var i=0;i<words.length;++i){
var rows = this.get_canvas_rows(ctx,words[i],canvas.width-10)
for(var j=0;j<rows.length;++j){
ctx.fillText(rows[j],10,h+text_size*j)
}
h += rows.length*text_size
}
get_canvas_rows函数参数介绍:
参数1:绘制的画布对象
参数2:绘制的文本
参数3:限制的文本宽度
关键步骤介绍:
步骤1:将输入文本拆分为单个字符数组。
步骤2:将字符数组依次赋予t_line,不断扩大t_line长度,直到达到文本宽度限制,将t_line作为一行文本赋予rows数组,t_line重新计数,直到字符数组最后一个字符。
步骤3:返回rows数组。
javascript
get_canvas_rows(ctx,line,maxWidth){
var chars = line.split('')
var rows = []
var t_line = ''
for(var i=0;i<chars.length;++i){
var line_w = ctx.measureText(t_line+chars[i]).width
if(line_w>maxWidth){
rows.push(t_line)
t_line = chars[i]
}else{
t_line += chars[i]
}
}
rows.push(t_line)
return rows
},
更多内容欢迎关注、评论、私信博主。
有用的话欢迎打赏~~~