公司网站制作教程,手机网页源码,怎么打开wordpress后台,页面设计线稿关键步骤介绍#xff1a;
text为需要绘制的文本#xff0c;通过换行符将text分割为words数组。
basic_height为第一行文本的高度。
get_canvas_row函数根据行宽限制将输入文本转化为不同的行#xff0c;实现见下文。
text_size为设置的文本高度#xff0c;htext_size*j…关键步骤介绍
text为需要绘制的文本通过换行符将text分割为words数组。
basic_height为第一行文本的高度。
get_canvas_row函数根据行宽限制将输入文本转化为不同的行实现见下文。
text_size为设置的文本高度htext_size*j为每行待绘制文本的高度绘制完成后更新h。
var words text.split(\n)
var h basic_height
for(var i0;iwords.length;i){var rows this.get_canvas_rows(ctx,words[i],canvas.width-10)for(var j0;jrows.length;j){ctx.fillText(rows[j],10,htext_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数组。 get_canvas_rows(ctx,line,maxWidth){var chars line.split()var rows []var t_line for(var i0;ichars.length;i){var line_w ctx.measureText(t_linechars[i]).width if(line_wmaxWidth){rows.push(t_line)t_line chars[i]}else{t_line chars[i]}}rows.push(t_line)return rows},
更多内容欢迎关注、评论、私信博主。
有用的话欢迎打赏~~~
