HTML5 canvas 文本自动换行

来源：互联网发布：门窗优化编辑：程序博客网时间：2024/06/08 10:09

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中引用，就可以实现字符自动换行了。

0 0