Schreiben Sie text auf Leinwand mit hintergrund

, Wie der text funktioniert in Leinwand

Leider Nein, Sie kann nicht produzieren, text mit hintergrund mit dem text Methoden - nur die Füllung oder Kontur des Textes selbst.

Dies ist, weil die Zeichen aus dem schriftart (font) werden in einzelnen Formen oder Pfade, wenn Sie wollen, in den hintergrund, es wäre der innere Teil des symbols an sich (den Teil, den Sie sehen, wenn Sie gefüllt ist). Es gibt keine Ebene für die black-box (das Rechteck, das die Glyphe passt) die Glyphe nutzt neben der geometrischen position, so brauchen wir, um eine Art black-box-und Lager selbst.

Auf dem alten computer-Systemen die meisten Schriften binäre Schrift, die wo einstellen, oder deaktivieren eines Pixel. Statt nur löschen des Hintergrunds könnte man entscheiden, um eine hintergrund statt. Dies ist nicht der Fall mit Vektor-Schriften, die standardmäßig (in einem browser hat direkten Zugriff auf die Glyphen-geometrie und kann deshalb liefern einen hintergrund in dieser Art und Weise).

Erstellen von benutzerdefinierten hintergrund

Um ein Hintergrundbild erstellen, die Sie brauchen würde, um es zu zeichnen, zuerst mit anderen Mitteln wie Formen oder ein Bild.

Beispiele:

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

oder

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

ziehen Sie dann den text oben:

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

Können Sie measureText um herauszufinden, die Breite des Textes (in der Zukunft auch die Höhe: Aufstieg + Abstieg) und verwenden, dass als Grundlage:

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

Können Sie wickeln Sie das alles in einer Funktion. Die Funktion hier ist basic, aber Sie können erweitern es mit Farb-und hintergrund-Parameter als auch als Polsterung 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();
}

ONLINE DEMO HIER

Nur beachten, dass diese Art der "Messung" Höhe ist nicht korrekt. Messen Sie die Höhe der schriftart, indem Sie eine temporary-div/span-element und erhalten die berechneten Stil aus, wenn die schriftart und der text gesetzt ist.

InformationsquelleAutor