Javascript Canvas measureText（）提供了错误的值

我使用measureText（）一次显示一个字符的文本，它给了我错误的值

我有一个函数drawChar（ch），用于绘制字符，一个上下文“ctx”，以及一个变量“cursor”，用于在画布上定位字符：

var cursor = 0;

function drawChar(ch) 
{
    ctx.fillStyle = "White";
    ctx.font = "20px System";
    var twidth = ctx.measureText(ch).width;
    ctx.fillText(ch, cursor*twidth, 20);
}     

我有一个全局变量“letters”，我在开始时将其拆分以获得字母字符串数组：

 var letters = "ABCDEFGHIJKL";
 letters = letters.split("");

我这样调用函数：

 drawChar(letters[cursor++]);

它在前2-3个字符处显示正确对齐的字符，但随后measureText（）返回巨大的值，字符分散在画布上

---

谢谢。

这是因为每个字母都有不同的宽度值。它们不能直接相邻放置。这样不行

使用measureText

var canvas=document.createElement（'canvas'）；
document.body.append（画布）；
var ctx=canvas.getContext（'2d'）；
画布宽度=450；
画布高度=100；
var=0；
函数drawChar（ch）{
ctx.font=“20px系统”；
var twidth=ctx.measureText（ch）.width；
ctx.fillText（ch，光标*twidth，20）；
}
var letters=“ABCDEFGHIJKL”；
字母=字母。拆分（“”）；
用于（光标=0；光标}

这是因为每个字母都有不同的

宽度
值。它们不能直接相邻放置。这样不行。你需要将之前绘制的所有字母的宽度相加，而不是
光标*twidth
。谢谢，我想是不同的大小值造成了问题，但我认为我不确定如何实施它。