我希望能够在画布视图和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>
您可以调整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>