canvas參考手冊

場景：畫布繪制文本，使用 context.fillText(text,x,y,maxWidth)。文本對其也就是設置xy坐標問題。

以下的畫布設定寬度假設都是width：500

一、canvas文本左對齊：
就是x軸設置為0即可。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var str='這是需要繪制的文本內容'

ctx.fillText(str, 0, y)

二、canvas文本居中：
①首先文本有個居中屬性：ctx.textAlign = ‘center’
②其次設置x軸的位置為畫布寬度500的一半即可

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var str='這是需要繪制的文本內容'
 
ctx.font = 'bold 18px sans-serif';
ctx.textAlign = 'center';//文字水平居中
ctx.fillText(str, (500 / 2), 200) //第一個參數是繪制文本 第二個x設置畫布寬度一半 第三個是y坐標

三、canvas文本右對齊：
①首先有個計算文本長度的方法 ctx.measureText(‘文字內容’)
②其次設置x軸的位置為畫布寬度500 減去 文字長度即可

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var str='這是需要繪制的文本內容'
 
ctx.font = 'bold 18px sans-serif';
ctx.fillText(str, 500 - ctx.measureText(str).width, 200) //第一個參數是繪制文本 第二個x設置畫布寬度減去文字寬度 第三個是y坐標

四、canvas文本自動換行和設置行間距：
①首先有個計算文本長度的方法 ctx.measureText(‘文字內容’)，將文本分割成幾份
②其次是依次渲染不同的文本在不同的坐標軸中

    createdCanvas() {
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      var str = '這是需要繪制的文本內容這是需要繪制的文本內容這是需要繪制的文本內容這是需要繪制的文本內容這是需要繪制的文本內容這是需要繪制的文本內容'

      ctx.font = 'bold 18px sans-serif';
      this.drawtext(cxt, str, 10, 10, 400) // 繪制文字并換行
    },

    // 文字換行
    drawtext(ctx, t, x, y, w) {
      //參數說明
      //ctx：canvas的 2d 對象，t：繪制的文字，x,y:文字坐標，w：文字最大寬度
      let chr = t.split("")
      let temp = ""
      let row = []

      for (let a = 0; a < chr.length; a++) {
        if (ctx.measureText(temp).width < w && ctx.measureText(temp + (chr[a])).width <= w) {
          temp += chr[a];
        } else {
          row.push(temp);
          temp = chr[a];
        }
      }
      row.push(temp)
      for (let b = 0; b < row.length; b++) {
        ctx.fillText(row[b], x, y + (b + 1) * 20); //每行字體y坐標間隔20-就是行間距
      }

    }