javascript - Canvas measureText() 给出错误的值

Question

我正在使用 measureText() 一次显示一个字符的文本，但它给了我错误的值。

我有一个绘制字符的函数 drawChar(ch)、一个上下文“ctx”和一个将字符定位在 Canvas 上的变量“光标”:

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() 返回巨大的值并且字符散布在 Canvas 上。

谢谢。

Answer 1

那是因为每个字母都有不同的宽度值。它们不能紧挨着放置。这样不行。

使用测量文本

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

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

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

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

没有measureText，静态值

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

实现方式

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