Question

我有一张500 * 250（w * h）的画布并将此代码应用于它;

var cvs = document.getElementById('Dugong');
var ctx = cvs.getContext('2d');
var cvsHeight = cvs.height; // 250
var cvsWidth = cvs.width; // 500

var loadUpFlappy = "Flappy";
var loadUpDugong = "Dugong";

ctx.fillStyle = "#ECA20F";
ctx.fillRect(5, (cvsHeight / 2) + 1, ctx.measureText(loadUpFlappy).width + 10, 2); // across, down, width, height
ctx.fillRect(cvsWidth - (ctx.measureText(loadUpDugong).width + 5), cvsHeight / 2 + 1, ctx.measureText(loadUpDugong).width + 10, 2);

ctx.fillStyle = "#DADFE1";
ctx.font = "40px Century Schoolbook";
ctx.fillText(loadUpFlappy, 10, cvsHeight / 2);
ctx.fillText(loadUpDugong, cvsWidth - (ctx.measureText(loadUpDugong).width + 10), cvsHeight / 2);

据我所知，这段代码应该输出;

一条#ECA20F行，其高度为2，距离左画布边框5，在画布下方为1中间一行，宽度为Flappy加10。
另一条#ECA20F行，其高度为2，距离右侧画布边框5，在画布下方为1中间一行，宽度为Dugong加10。

和

Flappy中的#DADFE1一词10远离画布的左边框，位于画布中间。
单词Dugong也在#DADFE1中，距离画布的右侧边界10，并且也位于画布的中间。

我的问题是线条与文本不匹配（它们应该跨越文本的宽度加上两边的5px）。相反，他们这样做;

View Image

很抱歉，如果我对这个问题有任何明显的答案，因为我是一个＆＃39; noob＆＃39;说到javascript和画布。

Answer 1

编辑：我认为不可能采用文字长度。所以我有点不对劲。

由于您不知道文本中的字体大小，因此没有简单的方法来放置这些行。你可以做的是将文本对齐在中心（ctx.textAlign = 'center'）并将其放在一个以其为中心的某个点上。然后根据文本长度和大小设置线宽。将线总是放在这一点下方，并将相同的X设置为点，用线条除以2得到的宽度减去它。但在这种情况下线宽不是很精确，但它有助于缩小字数。

画布放置问题

1 个答案: