html5 的canvas 提供了多样性的功能。
在canvas中提供了将文本作为图片输出到画布上的功能,通常用到的函数主要有canvas.drawText 和canvas.fillText两个。
以canvas.fillText()函数为例,在canvas.fillText("information" , width , height , maxwidth )中包含四个参数,"information"表示文本输出的内容,width和height分别表示你想要输出的文本起始字符左上角的位置,而maxwidth则表示了该字符串的最大宽度,例如将maxwidth设为100,则无论字符串有多长,都将限制在100像素宽度内。
下面代码则写了一个可以将长字符串自动换行的程序。代码如下:
function draw_long_text(longtext,cxt,begin_width,begin_height)
{
var linelenght = 20;
var text = "";
var count = 0;
var begin_width = begin_width;
var begin_height = begin_height;
var stringLenght = longtext.length;
var newtext = longtext.split("");
var context = cxt;
context.clearRect(0,0, 600,300);
context.textAlign = 'left';
for(i = 0; i <= stringLenght ; i++)
{
if(count == 20)
{
context.fillText(text,begin_width,begin_height);
begin_height = begin_height + 25;
text = "";
count = 0;
}
if(i == stringLenght)
{
context.fillText(text,begin_width,begin_height);
}
var text = text + newtext[0];
count ++;
newtext.shift();
}
}
其中cxt为获取到的canvas的实例。将上述代码保存为js文件,然后在html中引用,就可以实现字符自动换行了。