Question

在html5的canvas的一个问题。。大神，来帮帮忙啊！

在canvas上添加一张图片,在图片中间写字,怎么控制文字根据图片的宽度自动换行？

有大神能给个DEMO吗？？？？？？？

Answer 1

将文字显示在一个div中, 调整div样式, 保持宽度, 字体, 行高, 字号等信息和要在canvas上绘制的文字样式一致, 然后把要绘制的文字赋值到这个div中
var rng = document.createRange(); //生成一个文本区域
rng.selectNode(div.childNodes[0]); //文本区指向刚才的div里面的文本内容
var rects = rng.getClientRects(); //获得文本区的形状
用关键词"Range"去查询一下firefox的官方文档, 这个rects是一个数组
如果文本区自动换行成了3行, 那么rects中就会有3个
下面进行循环, div.childNodes[0].length 得到文字数量
var node = div.childNodes[0];
var length = node.length;
var lines = [];

for(var i = 0; i < length; i++)
{
rng.setEnd(node, i);
if(rng.getClientRects().length < 2)
continue;

if(i == length - 1)
{
lines.push(rng.toString());
break;

}

var txt = rng.toString();
lines.push(txt.substr(0, txt.length - 1));
rng.setStart(node, i - 1);

}
现在, lines数组中保存的就是各行文字了.