html5多行文本框,HTML5 canvas 多行文本

使用JavaScript的原型特性，这样就可以从画布上下文中调用该函数

CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) {

var lines = text.split("\n");

for (var i = 0; i < lines.length; i++) {

var words = lines[i].split(' ');

var line = '';

for (var n = 0; n < words.length; n++) {

var testLine = line + words[n] + ' ';

var metrics = this.measureText(testLine);

var testWidth = metrics.width;

if (testWidth > maxWidth && n > 0) {

this.fillText(line, x, y);

line = words[n] + ' ';

y += lineHeight;

}

else {

line = testLine;

}

}

this.fillText(line, x, y);

y += lineHeight;

}

}

用法

var myCanvas = document.getElementById("myCanvas");

var ctx = myCanvas.getContext("2d");

ctx.fillStyle = "black";

ctx.font = "12px sans-serif";

ctx.textBaseline = "top";

ctx.wrapText("Hello\nWorld!",20,20,160,16);