>[success] # 绘制字体 ~~~ 1.ctx.font = '微软雅黑' 设置字体 2.strokeText() 3.fillText(text,x,y,maxWidth) text 要绘制的文本 x,y 文本绘制的坐标（文本左下角） maxWidth 设置文本最大宽度，可选参数 4.ctx.textAlign文本水平对齐方式，相对绘制坐标来说的 left center right start 默认 end direction属性css(rtl ltr) start和end于此相关 如果是ltr,start和left表现一致 如果是rtl,start和right表现一致 5.ctx.textBaseline 设置基线（垂直对齐方式 ） top 文本的基线处于文本的正上方，并且有一段距离 middle 文本的基线处于文本的正中间 bottom 文本的基线处于文本的证下方，并且有一段距离 hanging 文本的基线处于文本的正上方，并且和文本粘合 alphabetic 默认值，基线处于文本的下方，并且穿过文字 ideographic 和bottom相似，但是不一样 6.measureText() 获取文本宽度obj.width ~~~ ![](https://box.kancloud.cn/caab89ed5b3665be01f66efa47625ece_449x309.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; display: block; margin: 100px auto; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*1.在画布的中心绘制一段文字*/ /*2.申明一段文字*/ var str = '您好中国'; /*3.确定画布的中心*/ var w = ctx.canvas.width; var h = ctx.canvas.height; /*4.画一个十字架在画布的中心*/ ctx.beginPath(); ctx.moveTo(0, h / 2 - 0.5); ctx.lineTo(w, h / 2 - 0.5); ctx.moveTo(w / 2 - 0.5, 0); ctx.lineTo(w / 2 - 0.5, h); ctx.strokeStyle = '#eee'; ctx.stroke(); /*5.绘制文本*/ ctx.beginPath(); ctx.strokeStyle = '#000'; var x0 = w/2; var y0 = h/2; /*注意：起点位置在文字的左下角*/ /*有文本的属性 尺寸 字体 左右对齐方式 垂直对齐的方式*/ ctx.font = '40px Microsoft YaHei'; /*左右对齐方式 (center left right start end) 基准起始坐标*/ ctx.textAlign = 'center'; /*垂直对齐的方式 基线 baseline(top,bottom,middle) 基准起始坐标*/ ctx.textBaseline = 'middle'; //ctx.direction = 'rtl'; //ctx.strokeText(str,x0,y0); ctx.fillText(str,x0,y0); /*6.画一个下划线和文字一样长*/ ctx.beginPath(); /*获取文本的宽度*/ console.log(ctx.measureText(str)); var width = ctx.measureText(str).width; ctx.moveTo(x0-width/2,y0 + 20); ctx.lineTo(x0+width/2,y0 + 20); ctx.stroke(); </script> </body> </html> ~~~