在canvas中提供了将文本作为图片输出到画布上的功能，通常用到的函数主要有canvas.drawtext 和canvas.filltext两个。
以canvas.filltext()函数为例，在canvas.filltext(information , width , height , maxwidth )中包含四个参数，information表示文本输出的内容，width和height分别表示你想要输出的文本起始字符左上角的位置，而maxwidth则表示了该字符串的最大宽度，例如将maxwidth设为100，则无论字符串有多长，都将限制在100像素宽度内。
接下来我们来看一看将canvas文字换行的代码：
<!doctype html><html><head> <meta charset="utf-8"> <title>canvas自动换行</title> <style type="text/css"> * { margin: 0 } #main { width: 400px; margin: 20px auto 0; } #canvas, #editablewarp, #editable, #hidetext { width: 400px; height: 125px; padding: 0; border: 0; background: pink; color: blue; font-size: 14px; font-family: 'sans-serif'; position: relative; z-index: 1 } #hidetext { z-index: 0; position: absolute; word-break: break-word; word-wrap: break-word; } p { line-height: 32px; } </style></head><body> <div id="main"> <p> 输入： </p> <div id="editablewarp"> <div id="hidetext"></div> <textarea id="editable" placeholder="请输入文字..."></textarea> </div> <p> canvas输出： </p> <canvas id="canvas" width="400" height="125">您的浏览器不支持canvas</canvas> </div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> var $canvas = $('#canvas'), $editable = $('#editable'), $hidetext = $('#hidetext'), ctx = $(canvas)[0].getcontext("2d"); $editable.keyup(function handleedittable () { var txt = $editable.val(), html = converttext(txt); $hidetext.html(html); drawtext(); }); function converttext(txt) { var html = txt.replace(/(\s)/ig, '<span>$1</span>'); html = html.replace(/\n|\r/ig, '<br>'); html = html.replace(/\s/ig, ' '); return html; } function drawtext () { ctx.clearrect(0, 0, $(canvas).width(), $(canvas).height()); var fontsize = $hidetext.css('fontsize'); ctx.font = fontsize + ' sans-serif'; ctx.textalign = 'conter'; ctx.textbaseline = "top"; ctx.fillstyle = 'red'; $.each($("#hidetext span"), function (i, item) { var pos = $(item).position(); var txt = $(item).text(); ctx.filltext(txt, pos.left, pos.top); }); } </script></body></html>
canvas换行效果如下：
本篇文章到这里就结束了，关于canvas元素更多的知识可以参考html5开发手册学习具体内容。
以上就是canvas文字怎么换行？canvas文字换行的方法介绍的详细内容。