《canvas》之第5章文本操作

mali378287007

已于 2023-12-13 14:03:52 修改

阅读量1.6k

点赞数 1

分类专栏：整理 canvas 学习文章标签： canvas 前端

于 2022-06-24 12:00:00 首次发布

本文链接：https://blog.csdn.net/oqqyx1234567/article/details/125362864

版权

整理同时被 3 个专栏收录

181 篇文章 11 订阅

订阅专栏

学习

130 篇文章 4 订阅

订阅专栏

canvas

20 篇文章 6 订阅

订阅专栏

《canvas》之第5章文本操作

第5章文本操作

第5章文本操作

5.1 文本操作简介

方法	说明
fillText()	绘制填充文本
strokeText()	绘制描边文本
measureText()	获取文本长度

属性	说明
font	定义文本字体样式（大小、粗细等）
textAlign	定义文本水平对齐方式
textBaseline	定义文本垂直对齐方式
fillStyle	定义画笔填充路径的样式
strokeStyle	定义画笔描边路径的样式

5.2 文本操作方法

strokeText()、fillText()、measureText() 。

5.2.1 strokeText()方法

绘制描边文本，空心文本。

strokeText(text, x, y, maxWidth)

x，y表示文本最左边和最下边的坐标。
maxWidth，可选参数，最大文本宽度（px），超出时，文本会被压缩至maxWidth。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            var text = "绿叶学习网";
            cxt.font = "bold 30px 微软雅黑";
            cxt.strokeStyle = "purple";
            cxt.strokeText(text, 30, 60);
            //cxt.strokeText(text, 30, 60, 100);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

5.3.2 fillText()方法

绘制填充文本，实心文本。

fillText(text, x, y, maxWidth)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            var text = "绿叶学习网";
            cxt.font = "bold 30px 微软雅黑";
            cxt.fillStyle = "purple";
            cxt.fillText(text, 30, 60);
            //cxt.fillText(text, 30, 60, 100);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

5.2.3 measureText()方法

返回一个对象，该对象width属性获取文本长度。

var length = ctx.measureText(text).width;

获取文本高度

let metrics = ctx.measureText(text); 

//所有字在这个字体下的高度
let fontHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent; 

// 当前文本字符串在这个字体下用的实际高度
let actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;

文本长度

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            var text = "绿叶学习网";
            cxt.font = "bold 30px 微软雅黑";
            cxt.strokeStyle = "red";
            cxt.strokeText(text, 30, 60);

            var length = cxt.measureText(text).width;
            alert("文本长度为" + length + "px");
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

文本水平居中

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            var text = "绿叶学习网";
            cxt.font = "20px bold";
            var textWidth = cxt.measureText(text).width;
            var canvasWidth = cnv.width;
            var xPosition = canvasWidth / 2 - textWidth / 2;

            cxt.fillStyle = "purple";
            cxt.fillText(text, xPosition, 50);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

5.3 文本操作属性

font、textAlign、textBaseline。

5.3.1 font属性

定义文本的字体样式。

ctx.font = "font-style font-weight font-size/line-height font-family";

font默认值为10px sans-serif。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            var text = "helicopter";
            cxt.font = "bold 30px 微软雅黑";
            cxt.fillStyle = "purple";
            cxt.fillText(text, 30, 60);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

5.3.2 textAlign属性

定义文本水平方向的对齐方式。

ctx.textAlign = "属性值";

属性值	说明
start	文本在指定横坐标开始
end	文本在指定横坐标结束
left	文本左对齐（类似start）
rightt	文本右对齐（类似end）
center	文本中心在指定横坐标

start和end与文字阅读方向有关，从左到右阅读，start、end分别对应左右；从右到左阅读，start、end分别对应右左。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            //在横坐标150处绘制一条竖线
            cxt.moveTo(150, 0);
            cxt.lineTo(150, 200);
            cxt.strokeStyle = "purple";
            cxt.stroke();

            cxt.font = "15px Arial";

            cxt.textAlign = "start";
            cxt.fillText("textAlign取值为start", 150, 30);
            
            cxt.textAlign = "left";
            cxt.fillText("textAlign取值为left", 150, 60);
            
            cxt.textAlign = "end";
            cxt.fillText("textAlign取值为end", 150, 90);
            
            cxt.textAlign = "right";
            cxt.fillText("textAlign取值为right", 150, 120);
            
            cxt.textAlign = "center";
            cxt.fillText("textAlign取值为center", 150, 150);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="300" height="200" style="border:1px dashed gray;"></canvas>
</body>
</html>

5.3.3 textBaseline属性

定义文本垂直方向的对齐方式。

ctx.textBaseline= "属性值";

属性值	说明
alphabetic	文本基线是普通英文字母的基线
top	文本基线是em方框的顶端
middle	文本基线是em方框的中心
bottom	文本基线是em方框的底端

其他属性hanging、ideographic等。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            //在纵坐标100处绘制一条横线
            cxt.moveTo(0, 100);
            cxt.lineTo(300, 100);
            cxt.strokeStyle = "purple";
            cxt.stroke();

            cxt.font = "20px Arial";
            
            cxt.textBaseline = "alphabetic";
            cxt.fillText("alphabetic", 10, 100);
            
            cxt.textBaseline = "top";
            cxt.fillText("top", 110, 100);
            
            cxt.textBaseline = "middle";
            cxt.fillText("middle", 160, 100);
            
            cxt.textBaseline = "bottom";
            cxt.fillText("bottom", 230, 100);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="300" height="200" style="border:1px dashed gray;"></canvas>
</body>
</html>