居中HTML5响应式画布文本

Question

我正在使用以下函数，允许应用程序用户将文本插入到他们的画布照片中。当文本靠近边缘时，它会像预期的那样缩小，但如果文本大小不大于画布，则无法找到居中文本的方法。请看下面的代码：

var canvas4 = document.getElementById("canvas4");
        var ctx4 = canvas4.getContext("2d");

        canvas4.width = $(window).width();
        canvas4.height = $(window).height();

        var txt = value,
            tw,
            oc, octx;
        ctx4.font = '40px sans-serif';
        ctx4.fillStyle = 'blue';
        ctx4.textBaseline = 'top';
        ctx4.globalAlpha = 0.50;

        tw = ctx4.measureText(txt).width;

        if (tw > canvas4.width - 20) {
                oc = document.createElement('canvas');
                octx = oc.getContext('2d');
                oc.width = tw;
                oc.height = parseInt(ctx4.font, 10) * 1.2;
                octx.font = '40px sans-serif';
                octx.textBaseline = 'top';
                octx.fillText(txt, 0, 0);
                ctx4.drawImage(oc, 10, canvas4.height - 100, canvas4.width - 20, (canvas4.width - 20) / tw * oc.height);
        } else {
            ctx4.fillText(txt, 10, canvas4.height - 100);
        };

我曾尝试过文本对齐，比如：ctx4.textAlign = 'center, canvas4.width / 2, canvas4.height - 100';。

- Britton Pentakill

Answer 1

ctx.fillText("Your text here",canvas.width/2, canvas.height/2); 

我对画布元素没有经验。但这会帮助你。

- Najam Us Saqib

---

我认为将x和y设置为画布大小的一半并不能帮助我...因为我已经进行了这些设置，但没有得到期望的结果。我认为需要使用tw（measureText的宽度）与画布宽度结合进行一些数学计算。只是我不太擅长数学，不知道该怎么做。 - Britton Pentakill

我想通了...感觉有点傻 :D解决方案是取画布大小的一半，然后减去文本宽度的一半。ctx4.fillText(txt, canvas4.width/2 - tw/2, canvas4.height - 100); - Britton Pentakill

Answer 2

textAlign 只需要一个单词，"center"。其余的内容放在你的 fillText 调用中。

ctx4.textAlign = 'center';
ctx4.fillText(txt, canvas4.width / 2, canvas4.height - 100);

将textAlign设置为"center"会使文本的中心出现在fillText调用中指定的点。如果该点位于画布中心，则整个文本将居中显示在画布上。

- AuxTaco

---

将textAlign设置为center会使文本从屏幕左侧开始。 - Britton Pentakill

谢谢...我以为我已经尝试过了，但我猜我弄错了什么，因为它按照你所解释的居中对齐，并且这样可以避免我提出的解决方案中的额外计算。我选择这个作为最佳答案。 - Britton Pentakill