javascript - 即使调整大小， Canvas 文本也始终居中吗？

Question

我目前正在尝试处理这个由其他人创建的脚本。是的，我捕获了它，是的，我会给予积分。

我遇到的问题是，即使窗口大小已调整，也尝试将文本居中。当您将光标移动到文本上时，它会随机爆炸。当我调整窗口大小时，我需要移动相同的文本(以及那些分解的字符)。我可以轻松地使用 fillText() 放入新文本，然后替换分解的字符。

显然我在我的例子中尝试过这个:

window.onresize = function(event) {
    reload(canvas_id);
}

var reload = function(canvas_id) {
    canvas = document.getElementById(canvas_id);
    context = canvas.getContext("2d");

    canvas.width = window.innerWidth;
}

这会完美地调整 Canvas 大小，但文本将不再居中。为了在放置文本时将其居中，我这样做:

(window.innerWidth / 2) - (Math.round(bgContext.measureText(keyword).width/2))

bgContext 显然是 canvas.getContext("2d"); 。

这是一个显示此问题的 JSFiddle:http://jsfiddle.net/2e8o5db8/1/

Answer 1

首先，告诉canvas绘制从中心X对齐的文本，而不是默认的左对齐

context.textAlign = 'center';

然后将fillText中的x,y设置为 Canvas 的中心。

fillText('Hello', canvas.width/2, 50);

通过使用canvas.width/2，即使调整 Canvas 大小，您也将在中心 Canvas 上重新绘制文本。

使用canvas.width=...后，您必须重新绘制文本，因为 Canvas 内容将自动被清除。