Canvas中绘制居中文本

最新推荐文章于 2023-12-01 09:46:50 发布

伍德春

最新推荐文章于 2023-12-01 09:46:50 发布

阅读量2.3k

点赞数

分类专栏： canvas 文章标签： html

本文链接：https://blog.csdn.net/wudechun/article/details/127614826

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

canvas中绘制文本有两种方式：fillText()和strokeText()，一个是填充文本，一个是描边文本。下面是使用的填充文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fillText方法</title>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border: 1px dashed gray;display: block"></canvas>
    <script>
        window.onload = function () {
            var c = document.getElementById("canvas");
            var cxt = c.getContext('2d');
            var text = "填充文本";
            cxt.font = "30px 微软雅黑";

            var textWidth = cxt.measureText(text).width;
            var canvasWidth = c.width;
            var xPosition = canvasWidth / 2 - textWidth / 2;

            cxt.fillText(text,xPosition,50);
        };
    </script>
</body>
</html>

cxt.measureText(text).width是用来得到文本的宽度，cxt.font=“30px 微软雅黑”一定要放在其前面才行，即要先设置了字号等，再测量其值。

在canvas中绘制文本的坐标是以其左下角的坐标为准。