Question

我试图在任何地方寻找答案，但我似乎无法找到答案。但是我想将从输入创建的文本移动到画布中的特定位置，例如，在顶部中心。

代码运行如下：（JSFIDDLE）

    <canvas id="canvas" style="background-color: #000" width="800px" height="300px"></canvas>

<input type="text" id="header-text" placeholder="Your Title">

同时，js看起来像：

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');


  document.getElementById('header-text').addEventListener('keyup', function() {
    var stringTitle = document.getElementById('header-text').value;
    console.log(stringTitle)

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#fff';
    ctx.font = 'bold 36px Arial';
    ctx.textAlign = 'center'; 
    var text_title = stringTitle;
    ctx.fillText(stringTitle, 15, canvas.height / 2 + 35);
    });

有没有办法可以将生成的文本移到顶部中心？谢谢！

Answer 1

好吧，你可以使用数学来计算正确的位置。你用过：

ctx.fillText(stringTitle, 15, canvas.height / 2 + 35);

所以要将文本位置更改为顶部中心，您可以使用以下内容：

ctx.fillText(stringTitle, canvas.width/2, canvas.height / 8 + 35);

Answer 2

让文字位于顶部中心：

ctx.fillText(stringTitle, canvas.width / 2, 36);

36是字体大小（高度）。如果在水平定位文本时需要更高的精度，则可以使用 CanvasRenderingContext2D.measureText()

将画布元素移动到所需位置

2 个答案: