HTML5画布文本换行-之路教程

HTML5画布文本换行示例

<!DOCTYPE HTML>

<html>

  <head>

    <style>

      body

{

        margin: 0px;

        padding: 0px;

      }

      #myCanvas

 {

        border: 1px solid #9C9898;

      }

    </style>

    <script>

        function wrapText(context, text, x, y, maxWidth, lineHeight)

{

            var words = text.split(" ");

            var line = "";

 

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

        }

 

        window.onload = function ()

{

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

            var context = canvas.getContext("2d");

            var maxWidth = 300;

            var lineHeight = 25;

            var x = (canvas.width - maxWidth)/2;

            var y = 60;

            var text = "All the world 's a stage, and all the men and     women merely players. ";

 

            context.font = "16pt Calibri";

            context.fillStyle = "#333";

 

            wrapText(context, text, x, y, maxWidth, lineHeight);

        };

 

    </script>

  </head>

  <body>

    <canvas id="myCanvas" width="400" height="170"></canvas>

  </body>

</html>

HTML5画布文本换行

HTML5 Canvas 文本换行

文本换行是在 HTML5 画布中创建一个函数。
该函数定义了文本字符串、位置、宽度、行高。
mesaureText() 方法计算下一行，当下一行应该换行时。

日期：2020-04-11 23:04:10 来源：oir作者：oir

←HTML5 Canvas Text Metrics

如何使用HTML5实体参考→

HTML5画布文本换行示例

HTML5 Canvas 文本换行

目录