繪制字體 · 前端速查手冊

>[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> ~~~