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