Canvas measureText（）给出错误的值

Question

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

我有一个绘制字符，上下文＆＃34; ctx＆＃34;和变量＆＃34;光标＆＃34;的函数drawChar（ch）。将char定位在画布上：

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);
}     

我有一个全局变量＆＃34;字母＆＃34;我在开头分割得到一个字母串数组：

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

我这样称呼函数：

 drawChar(letters[cursor++]);

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

感谢。

Answer 1

那是因为每个字母都有不同的宽度值。它们不能直接相邻放置。那不会以这种方式工作。

使用measureText

＆＃13;

＆＃13;

var canvas = document.createElement('canvas');
document.body.append(canvas);
var ctx = canvas.getContext('2d');
canvas.width = 450;
canvas.height = 100;
var cursor = 0;
var twidth = 15;

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

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

for(cursor = 0; cursor < letters.length; cursor++) {
  drawChar(letters[cursor]);
}

＆＃13;

＆＃13;

＆＃13;

没有measureText，静态值

＆＃13;

＆＃13;

var canvas = document.createElement('canvas');
document.body.append(canvas);
var ctx = canvas.getContext('2d');
canvas.width = 450;
canvas.height = 100;
var cursor = 0;

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

function drawChar(ch) {
  ctx.font = "20px System";
  var twidth = 0;
  for(var i = 0; i < cursor; i++) {
    twidth += ctx.measureText(letters[i]).width;
  }
  ctx.fillText(ch, twidth, 20);
}

for(cursor = 0; cursor < letters.length; cursor++) {
  drawChar(letters[cursor]);
}

＆＃13;

＆＃13;

＆＃13;

这样做的方法

＆＃13;

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;