Zawijanie tekstu
Listing
var cv = document.getElementById("canvas");
var ctx = cv.getContext("2d");
var maxWidth = 400;
var lineHeight = 25;
var x = (cv.width - maxWidth) / 2;
var y = 60;
var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod lacinia elit, ut luctus quam elementum sit amet. Pellentesque pulvinar tempus est vel viverra. Vestibulum vulputate lobortis neque molestie iaculis. Nullam convallis nibh sit amet pellentesque bibendum. Ut posuere laoreet metus, nec finibus nisl posuere sed. Donec elit felis, viverra vitae posuere ut, blandit quis ipsum. Pellentesque laoreet, lorem et fringilla volutpat, ante dui sodales erat, non porttitor lacus lectus sit amet est. Phasellus imperdiet ante nec enim laoreet tempor. Suspendisse accumsan dolor eu neque bibendum auctor. Pellentesque felis risus, tincidunt a pharetra ac, placerat ac dui. Donec egestas, ligula eget bibendum vestibulum, orci sem iaculis mauris, at blandit odio magna sed risus. Maecenas vitae neque interdum, faucibus risus iaculis, malesuada justo. Duis felis justo, elementum vel nisl et, volutpat mollis quam. Fusce efficitur semper enim vel fermentum. ";
ctx.font = '12pt';
ctx.fillStyle = '#333';
var words = text.split(' ');
var line = '';
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = ctx.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
ctx.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
} else {
line = testLine;
}
}
ctx.fillText(line, x, y);