我有一个 500*250 (w*h) 的 Canvas 并将此代码应用于它;
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
,距离左 Canvas 边框5
, 在 Canvas 中间线下方1
并且宽度为Flappy
加上10
。 - 另一条
#ECA20F
线,高度为2
,距离 右 Canvas 边框5
, 位于 Canvas 中线下方1
并且宽度为Dugong
加上10
。
和
#DADFE1
中的单词Flappy
距离 Canvas 的左 边框10
并且是在 Canvas 中间。- 单词
Dugong
也在#DADFE1
中,距离 Canvas 的右 边框10
并且也在 Canvas 的中间。
我的问题是线条与文本不匹配(它们应该跨越文本的宽度加上两边的 5px)。相反,他们这样做;
如果这个问题有任何明显的答案,我很抱歉,因为我是 javascript 和 Canvas 方面的“菜鸟”。
最佳答案
编辑:我认为不可能采用文本长度。所以我有点错了。
没有简单的方法来放置线条,因为您不知道文本中的字体大小。您可以做的是将文本居中对齐 (ctx.textAlign = 'center'
) 并将其放置在将成为其中心的特定点上。然后根据文本长度和大小设置线宽。将线始终放在该点下方,并设置与该点相同的 X,减去该线的宽度除以 2。但在这种情况下,线宽并不准确,但它有助于较小的单词。
关于javascript - Canvas 放置问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37856137/