canvas 元素中的文本换行

etc

使用 元素中的文本换行 是一种常见的需求，特别是在绘制图表、图像或其他可视化内容时。通过 的文章，我们可以进一步了解如何在 元素中实现文本换行，并为读者提供一个案例代码。

html
<!DOCTYPE html>
<html>
<head>
    <title>Canvas 文本换行</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="200"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getcontext("2d");
        var text = "这是一个需要换行的长文本，我们希望在 canvas 元素中显示该文本，并且能够自动换行。";
        var lineHeight = 20;
        var maxWidth = 200;
        var x = 20;
        var y = 20;
        function wrapText(context, text, x, y, maxWidth, lineHeight) {
            var words = text.split(' ');
            var line = '';
            for (var i = 0; i < words.length; i++) {</p>                var testLine = line + words[i] + ' ';
                var metrics = context.measureText(testLine);
                var testWidth = metrics.width;
                if (testWidth > maxWidth && i > 0) {
                    context.fillText(line, x, y);
                    line = words[i] + ' ';
                    y += lineHeight;
                } else {
                    line = testLine;
                }
            }
            context.fillText(line, x, y);
        }
        ctx.font = "14px Arial";
        ctx.fillStyle = "black";
        wrapText(ctx, text, x, y, maxWidth, lineHeight);
    </script>
</body>
</html>

Javascript
function wrapText(context, text, x, y, maxWidth, lineHeight) {
    var words = text.split(' ');
    var line = '';
    for (var i = 0; i < words.length; i++) {</p>        var testLine = line + words[i] + ' ';
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > maxWidth && i > 0) {
            context.fillText(line, x, y);
            line = words[i] + ' ';
            y += lineHeight;
        } else {
            line = testLine;
        }
    }
    context.fillText(line, x, y);
}

html
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getcontext("2d");
    var text = "这是一个需要换行的长文本，我们希望在 canvas 元素中显示该文本，并且能够自动换行。";
    var lineHeight = 20;
    var maxWidth = 200;
    var x = 20;
    var y = 20;
    ctx.font = "14px Arial";
    ctx.fillStyle = "black";
    wrapText(ctx, text, x, y, maxWidth, lineHeight);
</script>