（direction & textAlign）&&（textBaseLine）

<template>
  <canvas class="" id="canvas" width="1000" height="1200">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
</template>

<script setup lang="ts">
onMounted(() => {
  const el = document.querySelector('#canvas') as HTMLCanvasElement
  const ctx = el.getContext('2d') as CanvasRenderingContext2D
  ctx.beginPath()
  ctx.fillStyle = '#00bcd4'
  ctx.fillRect(0, 0, 1000, 1200)

  ctx.beginPath()
  ctx.font = '20px Bahnschrift'
  ctx.strokeStyle = 'red'
  ctx.moveTo(500, 0)
  ctx.lineTo(500, 600)
  ctx.stroke()

  ctx.beginPath()
  ctx.moveTo(0, 600)
  ctx.lineTo(1000, 600)
  ctx.stroke()

  const fn = (direction: CanvasDirection, startNum = 60) => {
    ctx.direction = direction
    ctx.fillStyle = 'red'
    const textAlignArr: CanvasTextAlign[] = ['start', 'left', 'center', 'right', 'end']
    for (let i = 0; i < textAlignArr.length; i++) {
      ctx.textAlign = textAlignArr[i]
      ctx.fillText('打西边儿来了一个小伙儿=>' + direction + '->' + textAlignArr[i], 500, startNum + 30 * i)
    }
  }

  fn('inherit', 50)
  fn('ltr', 250)
  fn('rtl', 450)

  const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'] as CanvasTextBaseline[]
  baselines.forEach((baseline, index) => {
    ctx.font = '35px Arial'
    ctx.strokeStyle = '#000'
    ctx.textAlign = 'center'
    ctx.lineWidth = 1
    ctx.direction = 'inherit'
    ctx.beginPath()
    ctx.fillStyle = 'blue'
    ctx.textBaseline = baseline
    let y = 650 + index * 80

    ctx.fillText('他叫马骥，QAZwsxEDCrfvTGByhnUJMikOLp=>' + baseline, 500, y)
    ctx.moveTo(50, y + 0.5)
    ctx.lineTo(950, y + 0.5)
    ctx.stroke()
  })
})
</script>