[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) } ```