Ответ 1

Как текст работает в холсте

К сожалению нет, вы не можете создавать текст с фоном с помощью текстовых методов - только заполняйте или очертите сам текст.

Это потому, что глифы от шрифта (шрифта) преобразуются в отдельные фигуры или пути, если вы хотите, где фон его будет внутренней частью самого глифа (часть, которую вы видите при использовании заливки). Нет слоя для черного ящика (прямоугольника, в котором находится глиф), глиф использует помимо использования его геометрического положения, поэтому нам нужно предоставить себе вид черного ящика и подшипников.

На старых компьютерных системах большинство шрифтов, где есть двоичный шрифт, который устанавливает или очищает пиксели. Вместо того, чтобы просто очищать фон, вы можете выбрать фон вместо фона. Это не относится к векторным шрифтам по умолчанию (браузер имеет прямой доступ к геометрии глифов и, следовательно, может обеспечить такой фон).

Создание пользовательского фона

Чтобы создать фон, вам нужно будет сначала нарисовать его, используя другие средства, такие как фигуры или изображение.

Примеры:

ctx.fillRect(x, y, width, height);

или

ctx.drawImage(image, x, y  [, width, height]);

затем нарисуйте текст сверху:

ctx.fillText('My text', x, y);

Вы можете использовать measureText, чтобы узнать ширину текста (в будущем также height: ascend + descend) и использовать это в качестве основы:

var width = ctx.measureText('My text').width; /// width in pixels

Вы можете обернуть все это в функцию. Функция здесь является базовой, но вы можете расширить ее с помощью параметров цвета и фона, а также отступов и т.д.

/// expand with color, background etc.
function drawTextBG(ctx, txt, font, x, y) {

    /// lets save current state as we make a lot of changes        
    ctx.save();

    /// set font
    ctx.font = font;

    /// draw text from top - makes life easier at the moment
    ctx.textBaseline = 'top';

    /// color for background
    ctx.fillStyle = '#f50';

    /// get width of text
    var width = ctx.measureText(txt).width;

    /// draw background rect assuming height of font
    ctx.fillRect(x, y, width, parseInt(font, 10));

    /// text color
    ctx.fillStyle = '#000';

    /// draw text on top
    ctx.fillText(txt, x, y);

    /// restore original state
    ctx.restore();
}

ОНЛАЙН ДЕМО ЗДЕСЬ

Просто помните, что этот способ "измерения" высоты не является точным. Вы можете измерить высоту шрифта с помощью временного элемента div/span и получить от него рассчитанный стиль, если для него установлены шрифт и текст.

Ответ 2

Более простое решение - дважды вызвать fillText. Сначала строка Unicode + 2588 █, представляющая собой черный прямоугольник, повторяет ту же длину, что и текст, используя цвет фона. А затем вызовите fillText как обычно с цветом переднего плана.

Ответ 3

Эта функция дает вам вертикально и горизонтально центрированный текст с фоном. Это хорошо работает только с моноширинными шрифтами (символы с одинаковой шириной). Функция подсчитывает количество символов в строке, которое вы хотите напечатать, и умножает их на 0,62 (при условии, что ширина шрифта чуть меньше 0,62 от высоты). Фон в 1,5 раза больше размера шрифта. Измените это, чтобы соответствовать вашим потребностям.

function centeredText(string, fontSize, color) {
        var i = string.length;
        i = i*fontSize*0.62;
        if (i > canvas.width) {
          i = canvas.width;
        }
        ctx.fillStyle = "RGBA(255, 255, 255, 0.8)";
        ctx.fillRect(canvas.width / 2 - i / 2,canvas.height / 2 - (fontSize * 1.5) / 2, i, (fontSize * 1.5) );
        ctx.font = fontSize.toString() + "px monospace";
        ctx.fillStyle = color;
        ctx.textBaseline = "middle";
        ctx.textAlign = "center";

        ctx.fillText(string, canvas.width / 2, canvas.height / 2);
    }

Поэтому вызов функции будет выглядеть примерно так.

centeredText("Hello World", 30, "red");