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

最新推荐文章于 2024-04-16 16:23:38 发布

houyanhua1

最新推荐文章于 2024-04-16 16:23:38 发布

阅读量6.1k

点赞数 1

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

本文链接：https://blog.csdn.net/houyanhua1/article/details/79942081

版权

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

摘要由CSDN通过智能技术生成

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'