web-dev-qa-db-fra.com

Écrire du texte sur toile avec fond

Est-il possible d'écrire une image sur du canevas et d'écrire un texte avec un arrière-plan?

http://awesomescreenshot.com/09f1qf2213

html5canvastexthtml5-canvas
17
rask

Comment le texte fonctionne dans la toile

Malheureusement non, vous ne pouvez pas produire du texte avec un arrière-plan avec les méthodes de texte, mais seulement remplir ou décrire le texte lui-même.

Cela est dû au fait que les glyphes de la police de caractères (police) sont convertis en formes ou en chemins individuels si vous le souhaitez, son arrière-plan étant la partie interne du glyphe lui-même (la partie que vous voyez lorsque vous utilisez le remplissage). Il n'y a pas de couche pour la boîte noire (le rectangle dans lequel le glyphe s'insère) que le glyphe utilise en plus d'utiliser sa position géométrique, nous devons donc fournir une sorte de boîte noire et de roulements nous-mêmes.

Sur les anciens systèmes informatiques, la plupart des polices étaient des polices binaires qui définissaient ou effaçaient des pixels. Au lieu de simplement effacer l'arrière-plan, vous pouvez choisir de fournir un arrière-plan. Ce n'est pas le cas avec les polices vectorielles par défaut (un navigateur a un accès direct à la géométrie des glyphes et peut donc fournir un arrière-plan de cette façon).

Créer un arrière-plan personnalisé

Pour créer un arrière-plan, vous devez d'abord le dessiner à l'aide d'autres moyens, tels que des formes ou une image.

Exemples:

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

ou

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

puis dessinez le texte en haut:

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

Vous pouvez utiliser measureText pour trouver la largeur du texte (à l'avenir aussi la hauteur: ascend + desc) et l'utiliser comme base:

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

Vous pouvez envelopper tout cela dans une fonction. La fonction ici est basique mais vous pouvez la développer avec les paramètres de couleur et d’arrière-plan, ainsi que le remplissage, etc.

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

DEMO EN LIGNE ICI

Notez simplement que cette façon de "mesurer" la hauteur n'est pas précise. Vous pouvez mesurer la hauteur d'une police à l'aide d'un élément temporaire div/span et en extraire le style calculé lorsque la police et le texte sont définis.

35
user1693593

Je solution plus simple est d'appeler fillText deux fois. D'abord une chaîne de caractères Unicode + 2588 88, qui est un rectangle noir répété de la même longueur que le texte en utilisant la couleur d'arrière-plan. Et appelez fillText comme d'habitude avec la couleur de premier plan.

0
ToonTalk