Текст на холсте: фон

Question

Можно ли написать изображение на холсте и написать текст с фоном? Например, как это:

Answer 1

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

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

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

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

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

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

Примеры:

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

или

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

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

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

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

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

ONLINE DEMO HERE

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