Чтобы учесть «пары букв кернинга» и т.п., я написал следующее. Следует принять это во внимание, и грубое тестирование предполагает, что это так. Если у вас есть какие-либо комментарии по этому поводу, я хотел бы указать на мой вопрос по этому вопросу ( Добавление межбуквенного интервала в HTML-канве )
В основном он использует measureText (), чтобы получить ширину всей строки, а затем удаляет первый символ строки и измеряет ширину оставшейся строки, а также использует разницу для вычисления правильного позиционирования - таким образом, принимая во внимание кернинг пар и тому подобное. Смотрите данную ссылку для получения дополнительной псевдокод.
Вот HTML:
<canvas id="Test1" width="800px" height="200px"><p>Your browser does not support canvas.</p></canvas>
Вот код:
this.fillTextWithSpacing = function(context, text, x, y, spacing)
{
//Start at position (X, Y).
//Measure wAll, the width of the entire string using measureText()
wAll = context.measureText(text).width;
do
{
//Remove the first character from the string
char = text.substr(0, 1);
text = text.substr(1);
//Print the first character at position (X, Y) using fillText()
context.fillText(char, x, y);
//Measure wShorter, the width of the resulting shorter string using measureText().
if (text == "")
wShorter = 0;
else
wShorter = context.measureText(text).width;
//Subtract the width of the shorter string from the width of the entire string, giving the kerned width of the character, wChar = wAll - wShorter
wChar = wAll - wShorter;
//Increment X by wChar + spacing
x += wChar + spacing;
//wAll = wShorter
wAll = wShorter;
//Repeat from step 3
} while (text != "");
}
Код для тестирования демо / глазного яблока:
element1 = document.getElementById("Test1");
textContext1 = element1.getContext('2d');
textContext1.font = "72px Verdana, sans-serif";
textContext1.textAlign = "left";
textContext1.textBaseline = "top";
textContext1.fillStyle = "#000000";
text = "Welcome to go WAVE";
this.fillTextWithSpacing(textContext1, text, 0, 0, 0);
textContext1.fillText(text, 0, 100);
В идеале я бы выбрасывал несколько случайных строк и делал бы попиксельное сравнение. Я также не уверен, насколько хорош кернинг Верданы по умолчанию, хотя я понимаю, что он лучше, чем Arial - предложения по другим шрифтам с благодарностью приняты.
Так что ... пока все выглядит хорошо. На самом деле это выглядит идеально.
Все еще надеемся, что кто-то укажет на любые недостатки в процессе.
А пока я выложу это здесь, чтобы другие могли посмотреть, ищут ли они решение по этому вопросу.