我目前正在尝试处理这个由其他人创建的脚本。是的,我捕获了它,是的,我会给予积分。
我遇到的问题是,即使窗口大小已调整,也尝试将文本居中。当您将光标移动到文本上时,它会随机爆炸。当我调整窗口大小时,我需要移动相同的文本(以及那些分解的字符)。我可以轻松地使用 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/
最佳答案
首先,告诉canvas绘制从中心X对齐的文本,而不是默认的左对齐
context.textAlign = 'center';
然后将fillText
中的x,y设置为 Canvas 的中心。
fillText('Hello', canvas.width/2, 50);
通过使用canvas.width/2
,即使调整 Canvas 大小,您也将在中心 Canvas 上重新绘制文本。
使用canvas.width=...后,您必须重新绘制文本,因为 Canvas 内容将自动被清除。
关于javascript - 即使调整大小, Canvas 文本也始终居中吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31810590/