首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML5 canvas ctx.fillText不会换行吗?

HTML5 canvas ctx.fillText不会换行吗?
EN

Stack Overflow用户
提问于 2011-02-17 17:13:24
回答 15查看 116.1K关注 0票数 121

如果文本包含"\n“,我似乎无法将文本添加到画布。我的意思是,换行符不显示/工作。

代码语言:javascript
复制
ctxPaint.fillText("s  ome \n \\n <br/> thing", x, y);

上面的代码将在一行上绘制"s ome \n <br/> thing"

这是fillText的局限性,还是我做错了?“\n”在那里,没有打印出来,但它们也不起作用。

EN

回答 15

Stack Overflow用户

回答已采纳

发布于 2011-02-18 22:42:30

恐怕这是Canvas的fillText的一个限制。没有多行支持。更糟糕的是,没有内置的方法来测量线条高度,只有宽度,这使得你自己测量变得更加困难!

很多人都编写了自己的多行支持,其中最值得注意的可能就是Mozilla Skywriter了。

您需要做的要点是多次调用fillText,同时每次都将文本的高度添加到y值。(我相信,测量M的宽度是skywriter的人用来近似文本的方法。)

票数 70
EN

Stack Overflow用户

发布于 2012-07-06 20:10:57

也许来参加这个聚会有点晚了,但我发现下面的在画布上包装文本的教程很完美。

http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/

从那时起,我想到了让多行代码工作起来(对不起,Ramirez,你的代码不适合我!)。我在画布中包装文本的完整代码如下:

代码语言:javascript
复制
<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,只要您在操作画布之前在某些文本上使用了该字体-否则画布将不会拾取该字体。

希望这对某些人有帮助。

票数 41
EN

Stack Overflow用户

发布于 2014-02-05 18:26:02

将文本拆分为多行,然后分别绘制:

代码语言:javascript
复制
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;
  }
}
票数 28
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5026961

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档