绘制文本
最后更新于：2022-04-02 03:28:48
[TOC]
## 绘制文本
```
fillText(text, x, y [, maxWidth])
在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。
strokeText(text, x, y [, maxWidth])
在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。
font = value
当前我们用来绘制文本的样式。这个字符串使用和 CSS font 属性相同的语法。 默认的字体是 10px sans-serif。
textAlign = value
文本对齐选项。 可选的值包括：start, end, left, right or center。 默认值是 start。
textBaseline = value 基线对齐选项，可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
direction = value
文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
```
实例
```
var draw=()=>{
let canvas = document.querySelector("#tutorial");
if(!canvas.getContext)return;
/** * @type CanvasRenderingContext2D */
let ctx = canvas.getContext("2d");
ctx.font="100px sans-serif"
ctx.textAlign="start" //start, end, left, right or center, 默认 start
ctx.textBaseline="bottom" // top, hanging, middle, alphabetic, ideographic, bottom,默认值是 alphabetic
ctx.direction="rtl"
ctx.fillText("Hello",300,300)
ctx.strokeText("Hello",300,200)
}
```
';