HTML5 canvas 文本自动换行

最新推荐文章于 2025-05-13 13:23:59 发布

原创最新推荐文章于 2025-05-13 13:23:59 发布 · 1.2w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #canvas #js #实例

博客介绍了HTML5的canvas功能，重点讲解了将文本作为图片输出到画布上的功能，涉及canvas.drawText和canvas.fillText函数，以canvas.fillText()为例说明了其参数含义，还给出了实现长字符串自动换行的程序代码，保存为js文件在html中引用即可实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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