文字绘制
画笔.font = "字体大小 字体"
画笔.fillText =（文字内容,x1 ,y1, w） ：x1,y1: 内容的起点； w:内容所占据的最大宽度，超出该宽度会进行压缩
画笔.strokeText = （文字内容,x1 ,y1, w）：和fillText的参数一样
eg：
<!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>Document</title>
</head>
<body>
<!-- -->
<canvas
id = "canvas1"
width="1000"
height="600"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
var ctx = canvas1.getContext("2d")
ctx.font = "100px Microsoft YaHei"
ctx.fillText("洋", 200, 200, 100)
ctx.strokeText("洋", 300, 200, 100)
</script>
</body>
</html>
文字样式
- 水平对齐：
画笔.textAlign = 对齐方式，对齐方式："center"、"start"（默认）、"end"、"left"、"right"
注意这里对齐的参照是通过strokeText("文字"，x1，y1)函数设置的定点（x1,y1）
eg:center样式：
<!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>Document</title>
</head>
<body>
<!-- -->
<canvas
id = "canvas1"
width="1000"
height="600"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
var ctx = canvas1.getContext("2d")
ctx.font = "100px Microsoft YaHei"
ctx.textAlign = "center"
ctx.strokeText("yang", 300, 300)
ctx.arc(300,300,5,0,2*Math.PI)
ctx.fillStyle = "red"
ctx.fill()
</script>
</body>
</html>
- 基线对齐：
画笔.textBaseline= 对齐方式，对齐方式："top"、"bottom"、"middle"、"alphabetic"（文本基线对齐，默认）， - 文本方向：
画笔.direction = 方向， 方向："ltr"（从左到右）、"rtl"(从右到左)
文本宽度
预测量文本宽度：
画笔.measureText("文字")
eg:
<!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>Document</title>
</head>
<body>
<!-- -->
<canvas
id = "canvas1"
width="1000"
height="600"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
var ctx = canvas1.getContext("2d")
ctx.font = "100px Microsoft YaHei"
ctx.textAlign = "center"
ctx.textBaseline = "middle"
ctx.direction = "rtl"
ctx.strokeText("yang", 300, 300)
// 预测量文本宽度
const msg = ctx.measureText("yang")
console.log(msg);
ctx.arc(300,300,5,0,2*Math.PI)
ctx.fillStyle = "red"
ctx.fill()
</script>
</body>
</html>
