绘制文本

canvas 提供了两种方法来渲染文本：

fillText

语法：

fillText(text, x, y, [, maxWidth])

在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。

示例：

实现代码如下：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Canvas绘制填充文本</title>
        <style>
            body {
                height: 100vh;
                padding: 20px 30px;
            }
        </style>
        <script>
            function draw() {
                var canvas = document.getElementById('canvas');
                if (canvas.getContext) {
                    const ctx = canvas.getContext('2d');

                    ctx.font = '48px serif';
                    ctx.fillText('Hello World', 10, 80)

                } else {
                    alert('您的浏览器不支持Canvas!');
                }
            }
        </script>
    </head>

    <body onload="draw();">
        <canvas id="canvas" width="300" height="300" style="background-color: #f3f4f8; color: chocolate;"></canvas>
    </body>

</html>

strokeText

语法：

strokeText(text, x, y, [, maxWidth])

在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。

示例：

实现代码如下：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Canvas绘制描边文本</title>
        <style>
            body {
                height: 100vh;
                padding: 20px 30px;
            }
        </style>
        <script>
            function draw() {
                var canvas = document.getElementById('canvas');
                if (canvas.getContext) {
                    const ctx = canvas.getContext('2d');

                    ctx.font = '48px serif';
                    ctx.strokeText('Hello World', 10, 80)

                } else {
                    alert('您的浏览器不支持Canvas!');
                }
            }
        </script>
    </head>

    <body onload="draw();">
        <canvas id="canvas" width="300" height="300" style="background-color: #f3f4f8; color: chocolate;"></canvas>
    </body>

</html>

设置文本样式

设置文本样式的属性：

font：设置文本的字体和字号等样式。它的值是一个字符串，这个字符串使用和 CSS font 属性相同的语法。默认的字体是 10px sans-serif。
textAlign：文本对齐（重点：对齐是相对于绘制文本时X轴坐标线）选项。可选的值包括：start, end, left, right or center。默认值是 start。
textBaseline：基线（重点：基线是绘制文本时Y轴坐标线）对齐选项。可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
direction：文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

综合示例：

实现代码如下：（你可以调整代码中样式的配置查看不同效果）

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Canvas绘制文本样式综合示例</title>
        <style>
            body {
                height: 100vh;
                padding: 20px 30px;
            }
        </style>
        <script>
            function draw() {
                var canvas = document.getElementById('canvas');
                if (canvas.getContext) {
                    const ctx = canvas.getContext('2d');

                    // 基线参考
                    ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
                    ctx.beginPath();
                    ctx.moveTo(10, 150);
                    ctx.lineTo(280, 150)
                    ctx.stroke();

                    ctx.moveTo(150, 10);
                    ctx.lineTo(150, 280)
                    ctx.stroke();

                    ctx.font = '24px serif';
                    ctx.textAlign = 'end';
                    ctx.textBaseline = 'bottom';
                    ctx.direction = 'rtl';
                    ctx.fillStyle = 'red'; // 设置文本颜色
                    ctx.fillText('Hi!', 150, 150);


                } else {
                    alert('您的浏览器不支持Canvas!');
                }
            }
        </script>
    </head>

    <body onload="draw();">
        <canvas id="canvas" width="300" height="300" style="background-color: #f3f4f8; color: chocolate;"></canvas>
    </body>

</html>

预测量文本宽度

⚠️ 了解即可，暂时不知道具体应用场景。

当你需要获得更多的文本细节时，下面的方法可以给你测量文本的方法。

语法：measureText()将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性。

示例测量文本的宽度：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 预测量文本宽度</title>
    <style>
        body {
            height: 100vh;
            padding: 20px 30px;
        }
    </style>
    <script>
        function draw() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext) {
                const ctx = canvas.getContext('2d');

                const text = ctx.measureText('foo');
                console.log(text.width) // 16


            } else {
                alert('您的浏览器不支持Canvas!');
            }
        }
    </script>
</head>

<body onload="draw();">
    <canvas id="canvas" width="300" height="300" style="background-color: #f3f4f8; color: chocolate;"></canvas>
</body>

</html>

WEB程序开发笔记

Canvas入门学习笔记系列之：绘制文本

绘制文本

fillText

strokeText

设置文本样式

预测量文本宽度

文章归档

推荐文章

热门标签

友情链接