《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)
1

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

5.3.2 fillText()方法

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

fillText(text, x, y, maxWidth)
1

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

5.2.3 measureText()方法

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

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

获取文本高度

let metrics = ctx.measureText(text); 

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

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

文本长度

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

文本水平居中

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

5.3 文本操作属性

font、textAlign、textBaseline。

5.3.1 font属性

定义文本的字体样式。

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

5.3.2 textAlign属性

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

ctx.textAlign = "属性值";
1

属性值	说明
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

5.3.3 textBaseline属性

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

ctx.textBaseline= "属性值";
1

属性值	说明
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

相关阅读:
计算机毕业设计ssm+vue基本微信小程序的拼车自助服务小程序
 工控机与普通电脑的区别对于工业自动化应用至关重要
 浅理解java中的泛型
 ListenableFuture和countdownlatch使用example
【教程】 iOS混淆加固原理篇
 Spring使用RestTemplate返回的嵌套实体对象为空，转换json报错
 结构体定义 typedef struct 用法详解和用法小结
 Django
物联网AI MicroPython传感器学习之 MDL0025心率传感器
 面试经典150题——Day9
原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125362864

《canvas》之第5章 文本操作

《canvas》之第5章 文本操作

第5章 文本操作

5.1 文本操作简介

5.2 文本操作方法

5.2.1 strokeText()方法

5.3.2 fillText()方法

5.2.3 measureText()方法

5.3 文本操作属性

5.3.1 font属性

5.3.2 textAlign属性

5.3.3 textBaseline属性

《canvas》之第5章文本操作

《canvas》之第5章文本操作

第5章文本操作