canvas 系列学习笔记四《绘制文本》
1. 文本绘制
1.1 概述
绘制文本也有两种方式，fillText 和 strokeText 两种方法
1.2 代码描述
<!--
* @Author: ZY
* @Date: 2022-09-07 11:59:57
* @LastEditors: ZY
* @LastEditTime: 2022-09-07 15:30:44
* @FilePath: /canvas-case/04-绘制文本/01-文本绘制.html
* @Description: 文本绘制
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文本绘制</title>
</head>
<body>
<canvas id="canvas2d" width="500" height="800"></canvas>
</body>
<style>
#canvas2d {
border: 1px solid;
display: block;
margin: 0 auto;
}
</style>
<script>
let canvas2d = document.getElementById("canvas2d");
if (canvas2d.getContext) {
var ctx = canvas2d.getContext("2d");
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
ctx.strokeText("Hello world", 10, 150);
}
</script>
</html>1.3 运行显示
在这里插入图片描述
2. 对齐方式
2.1 概述
左右的对齐方式
ctx.textAlign = “left” || “right” || “center” || “start” || “end”;
2.2 代码示例
<!--
* @Author: ZY
* @Date: 2022-09-07 11:59:57
* @LastEditors: ZY
* @LastEditTime: 2022-09-07 14:10:00
* @FilePath: /canvas-case/04-绘制文本/02-对齐方式.html
* @Description: textAlign
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>textAlign</title>
</head>
<body>
<canvas id="canvas2d" width="500" height="600"></canvas>
</body>
<style>
#canvas2d {
border: 1px solid;
display: block;
margin: 0 auto;
}
</style>
<script>
let canvas2d = document.getElementById("canvas2d");
if (canvas2d.getContext) {
var ctx = canvas2d.getContext("2d");
ctx.font = "48px serif"
//ctx.textAlign = "left" || "right" || "center" || "start" || "end";
ctx.textAlign = "start"
ctx.strokeText("开始吧", 160, 50);
ctx.textAlign = "left"
ctx.strokeText("左对齐", 160,150);
ctx.textAlign = "center"
ctx.strokeText("居中吧", 160, 250);
ctx.textAlign = "right"
ctx.strokeText("右对齐", 160, 350);
ctx.textAlign = "end"
ctx.strokeText("结束吧", 160, 450);
}
</script>
</html>2.3 运行演示
在这里插入图片描述
3. 基线对齐方式
3.1 概述
CanvasRenderingContext2D.textBaseline 是 Canvas 2D API 描述绘制文本时，当前文本基线的属性。
ctx.textBaseline = “top” || “hanging” || “middle” || “alphabetic” || “ideographic” || “bottom”;
选项：
- top 文本基线在文本块的顶部。
- hanging 文本基线是悬挂基线。
- middle 文本基线在文本块的中间。
- alphabetic 文本基线是标准的字母基线。
- ideographic 文字基线是表意字基线；如果字符本身超出了 alphabetic 基线，那么 ideograhpic 基线位置在字符本身的底部。
- bottom文本基线在文本块的底部。与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。
默认值是 alphabetic。
3.2 代码示例
<!--
* @Author: ZY
* @Date: 2022-09-07 11:59:57
* @LastEditors: ZY
* @LastEditTime: 2022-09-07 15:19:49
* @FilePath: /canvas-case/04-绘制文本/03-基线对齐方式.html
* @Description: 文件描述
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文本绘制</title>
</head>
<body>
<canvas id="canvas2d" width="1600" height="800"></canvas>
</body>
<style>
#canvas2d {
border: 1px solid;
display: block;
margin: 0 auto;
}
</style>
<script>
let canvas2d = document.getElementById("canvas2d");
if (canvas2d.getContext) {
var ctx = canvas2d.getContext("2d");
// ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
const baselines = [
"top",
"hanging",
"middle",
"alphabetic",
"ideographic",
"bottom",
];
ctx.font = "36px serif";
ctx.strokeStyle = "red";
baselines.forEach(function (baseline, index) {
ctx.textBaseline = baseline;
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(1600, 100);
ctx.stroke();
ctx.fillText(baseline, 200 * index, 100);
});
}
</script>
</html>3.3 示例结果
在这里插入图片描述
4. 文本方向
4.1 概述
CanvasRenderingContext2D.direction 是 Canvas 2D API 用来在绘制文本时，描述当前文本方向的属性。
ctx.direction = “ltr” || “rtl” || “inherit”;
选项：
- ltr 文本方向从左向右。
- rtl 文本方向从右向左。
- inherit 根据情况继承 元素或者 Document 。
默认值是inherit。
4.2 代码示例
<!--
* @Author: ZY
* @Date: 2022-09-07 11:59:57
* @LastEditors: ZY
* @LastEditTime: 2022-09-08 14:09:59
* @FilePath: /canvas-case/04-绘制文本/04-方向.html
* @Description: 方向
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>方向</title>
</head>
<body>
<canvas id="canvas2d" width="500" height="500"></canvas>
</body>
<style>
#canvas2d {
border: 1px solid;
display: block;
margin: 0 auto;
}
</style>
<script>
let canvas2d = document.getElementById("canvas2d");
if (canvas2d.getContext) {
var ctx = canvas2d.getContext("2d");
//ctx.direction = "ltr" || "rtl" || "inherit";
const directions = [
"ltr",
"rtl",
"inherit",
];
ctx.font = "36px serif";
ctx.fillStyle = "red";
directions.forEach(function (direction, index) {
ctx.direction = direction
ctx.fillText("123456789abcddd", 200, 100 + 100 * index);
});
}
</script>
</html>4.3 示例结果
在这里插入图片描述
5. 预测量文本宽度
5.1 概述
当你需要获得更多的文本细节时，下面的方法可以给你测量文本的方法。
measureText()
将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性。
5.2 代码示例
<!--
* @Author: ZY
* @Date: 2022-09-09 09:16:52
* @LastEditors: ZY
* @LastEditTime: 2022-09-09 09:21:26
* @FilePath: /canvas-case/04-绘制文本/05-预测文本宽度.html
* @Description: 预测量文本宽度
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>预测量文本宽度</title>
</head>
<body>
<canvas id="canvas2d" width="500" height="500"></canvas>
</body>
<style>
#canvas2d {
border: 1px solid;
display: block;
margin: 0 auto;
}
</style>
<script>
let canvas2d = document.getElementById("canvas2d");
if (canvas2d.getContext) {
var ctx = canvas2d.getContext("2d");
console.log(draw('预测量文本宽度',ctx));
}
function draw(text,ctx) {
var textMetrics = ctx.measureText(text); // TextMetrics object
return textMetrics.width
}
</script>
</html>5.3 示例演示结果
在这里插入图片描述
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-09-09，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录