画布和HTML的文本对齐方式不同

问题描述 投票:0回答:1

我希望能够在画布视图和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个回答
0
投票

您可以调整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>
© www.soinside.com 2019 - 2024. All rights reserved.