Canvas中绘制居中文本

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中绘制文本的坐标是以其左下角的坐标为准。

猜你喜欢

转载自blog.csdn.net/wudechun/article/details/127614826