画布和 HTML 之间的文本对齐方式不同答案

【问题标题】：Text alignment differs between canvas and HTML画布和 HTML 之间的文本对齐方式不同
【发布时间】：2020-09-21 21:01:05
【问题描述】：

我希望能够以相同的结果在画布和 HTML 视图之间切换，但是当我尝试在区域内居中文本时它已经失败。如何修复下面的示例，以便两个标签完全独立于字体系列和大小重叠。

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.translate(canvas.width/2, canvas.height/2);
ctx.font = '64px Tahoma';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = 'BlueViolet';
ctx.fillText('Hello World!', 0, 0);

<canvas
  height="160"
  id="canvas"
  style="
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
  "
  width="480"
></canvas>
<div
  style="
    align-items: center;
    color: FireBrick;
    display: flex;
    font-family: Tahoma;
    font-size: 64px;
    height: 160px;
    justify-content: center;
    left: 0;
    line-height: 1;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 480px;
  "
>Hello World!</div>

【问题讨论】：

标签： html css canvas text alignment

【解决方案1】：

您可以调整 ctx.translate 以使其正常工作吗？如果是，请更改为以下内容：canvas.height/2+6

ctx.translate(canvas.width/2, canvas.height/2+6);

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.translate(canvas.width/2, canvas.height/2+6);
ctx.font = '64px Tahoma';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = 'BlueViolet';
ctx.fillText('Hello World!', 0, 0);

<canvas
  height="160"
  id="canvas"
  style="
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
  "
  width="480"
></canvas>
<div
  style="
    align-items: center;
    color: FireBrick;
    display: flex;
    font-family: Tahoma;
    font-size: 64px;
    height: 160px;
    justify-content: center;
    left: 0;
    line-height: 1;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 480px;
  "
>Hello World!</div>

【讨论】：

嗨。谢谢。但它应该独立于字体设置。