php绘制画布添加图片文字换行,canvas文字怎么换行？canvas文字换行的方法介绍

html5中的canvas是用于绘制图形的，可以通过 JavaScript 来控制它绘制各种文本和图像，但是在使用 canvas 绘制文字的时候，我们可能想要让这些文字在某处按要求换行，这该如何实现呢？本篇文章将来给大家介绍关于canvas文字换行的方法，话不多说，下面我们来一起看看具体的内容。

在canvas中提供了将文本作为图片输出到画布上的功能，通常用到的函数主要有canvas.drawText 和canvas.fillText两个。

以canvas.fillText()函数为例，在canvas.fillText("information" , width , height , maxwidth )中包含四个参数，"information"表示文本输出的内容，width和height分别表示你想要输出的文本起始字符左上角的位置，而maxwidth则表示了该字符串的最大宽度，例如将maxwidth设为100，则无论字符串有多长，都将限制在100像素宽度内。

接下来我们来看一看将canvas文字换行的代码：

canvas自动换行

* {

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;

}

输入：

canvas输出：

您的浏览器不支持canvas

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, '$1');

html = html.replace(/\n|\r/ig, '
');

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);

});

}

canvas换行效果如下：

本篇文章到这里就结束了，关于canvas元素更多的知识可以参考HTML5开发手册学习具体内容。