Canvas 文字的对齐方式(textAlign(),textBaseline())

最新推荐文章于 2025-02-28 15:41:09 发布

houyanhua1

最新推荐文章于 2025-02-28 15:41:09 发布

阅读量6.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Canvas 文章标签： canvas 对齐方式 textAlign textBaseline

本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/79942081

Canvas 专栏收录该内容

33 篇文章

订阅专栏

本文探讨了Canvas API中用于文字对齐的属性`textAlign`和`textBaseline`，通过实例代码展示了如何在画布的四个角精确地绘制文字，为网页图形设计提供灵活的文字布局方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border:1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        ctx.font = '2em 微软雅黑';   //只有设置字体样式(微软雅黑)后,大小才会生效。

        /*
        * 设置文字的水平对其方式：
        * ctx.textAlign = 'left || start' 、 'right || end' 、 'center'
        * 默认值为start。
        * */

        /*
        * 设置文字的垂直对其方式：
        * ctx.textBaseline = 'top' 、'bottom'、'middle'、'alphabetic'、'hanging'、'ideographic'
        * 默认值为alphabetic。
        * */

        ctx.textAlign = 'left';
        ctx.textBaseline = 'ideographic';  //和'bottom'效果一样。
        ctx.fillText( '咯咯咯咯咯咯', 100, 200 );

        // 绘制文字的参考点
        ctx.beginPath();
        ctx.arc( 100, 200, 4, 0, Math.PI * 2 );
        ctx.fill();
    </script>
</body>
</html>

在画布四个角绘制文字.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border:1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        ctx.font = '28px 微软雅黑';  //只有设置字体样式(微软雅黑)后，大小才会生效。
        ctx.fillStyle = 'deeppink';

        // 在画布的左上角绘制一段文字
        ctx.textAlign = 'left';
        ctx.textBaseline = 'top';
        ctx.fillText( '左上角', 0, 0 );

        // 在画布的右上角绘制一段文字
        ctx.textAlign = 'right';
        ctx.textBaseline = 'top';
        ctx.fillText( '右上角', cvs.width, 0 );

        // 在画布的左下角绘制一段文字
        ctx.textAlign = 'left';
        ctx.textBaseline = 'bottom';
        ctx.fillText( '左下角', 0, cvs.height );

        // 在画布的右下角绘制一段文字
        ctx.textAlign = 'right';
        ctx.textBaseline = 'bottom';
        ctx.fillText( '右下角', cvs.width, cvs.height );
    </script>
</body>
</html>