HTML5 canvas ctx.fillText不会换行吗？
HTML5 canvas ctx.fillText不会换行吗？
提问于 2011-02-17 17:13:24
如果文本包含"\n“，我似乎无法将文本添加到画布。我的意思是，换行符不显示/工作。
ctxPaint.fillText("s ome \n \\n <br/> thing", x, y);上面的代码将在一行上绘制"s ome \n <br/> thing"。
这是fillText的局限性，还是我做错了？“\n”在那里，没有打印出来，但它们也不起作用。
回答 15
Stack Overflow用户
回答已采纳
发布于 2011-02-18 22:42:30
恐怕这是Canvas的fillText的一个限制。没有多行支持。更糟糕的是，没有内置的方法来测量线条高度，只有宽度，这使得你自己测量变得更加困难！
很多人都编写了自己的多行支持，其中最值得注意的可能就是Mozilla Skywriter了。
您需要做的要点是多次调用fillText，同时每次都将文本的高度添加到y值。(我相信，测量M的宽度是skywriter的人用来近似文本的方法。)
Stack Overflow用户
发布于 2012-07-06 20:10:57
也许来参加这个聚会有点晚了，但我发现下面的在画布上包装文本的教程很完美。
http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/
从那时起，我想到了让多行代码工作起来(对不起，Ramirez，你的代码不适合我！)。我在画布中包装文本的完整代码如下：
<script type="text/javascript">
// http: //www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var cars = text.split("\n");
for (var ii = 0; ii < cars.length; ii++) {
var line = "";
var words = cars[ii].split(" ");
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + " ";
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth) {
context.fillText(line, x, y);
line = words[n] + " ";
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
y += lineHeight;
}
}
function DrawText() {
var canvas = document.getElementById("c");
var context = canvas.getContext("2d");
context.clearRect(0, 0, 500, 600);
var maxWidth = 400;
var lineHeight = 60;
var x = 20; // (canvas.width - maxWidth) / 2;
var y = 58;
var text = document.getElementById("text").value.toUpperCase();
context.fillStyle = "rgba(255, 0, 0, 1)";
context.fillRect(0, 0, 600, 500);
context.font = "51px 'LeagueGothicRegular'";
context.fillStyle = "#333";
wrapText(context, text, x, y, maxWidth, lineHeight);
}
$(document).ready(function () {
$("#text").keyup(function () {
DrawText();
});
});
</script>其中c是画布的ID，text是textbox的ID。
正如你可能看到的，我使用的是非标准字体。您可以使用@ font -face，只要您在操作画布之前在某些文本上使用了该字体-否则画布将不会拾取该字体。
希望这对某些人有帮助。
Stack Overflow用户
发布于 2014-02-05 18:26:02
将文本拆分为多行，然后分别绘制：
function fillTextMultiLine(ctx, text, x, y) {
var lineHeight = ctx.measureText("M").width * 1.2;
var lines = text.split("\n");
for (var i = 0; i < lines.length; ++i) {
ctx.fillText(lines[i], x, y);
y += lineHeight;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5026961
复制相关文章
相似问题
腾讯云开发者
