[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.fontStretch

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

Przykłady:

// html
<canvas id="canvas" width="400" height="300"></canvas>

// javascript, uzyskać odwołanie do elementu canvas, CanvasRenderingContext2D korzystając z canvas właściwości
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const fontGoogle = new FontFace(
 "Inconsolata",
 'url(https://fonts.gstatic.com/s/inconsolata/v32/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7Lpp4U8WRP2l2eY.woff2) format("woff2")',
 { stretch: "50% 200%" },
);

document.fonts.add(fontGoogle);

document.fonts.load("20px Inconsolata").then(
 () => {
 ctx.font = "20px 'Inconsolata'";
 // Default (normal)
 ctx.fillText(`Witaj! (default: ${ctx.fontStretch})`, 5, 20);

 ctx.fontStretch = "ultra-condensed";
 ctx.fillText(`Witaj! (${ctx.fontStretch})`, 5, 50);

 ctx.fontStretch = "extra-condensed";
 ctx.fillText(`Witaj! (${ctx.fontStretch})`, 5, 80);

 ctx.fontStretch = "condensed";
 ctx.fillText(`Witaj! (${ctx.fontStretch})`, 5, 110);

 ctx.fontStretch = "semi-condensed";
 ctx.fillText(`Witaj! (${ctx.fontStretch})`, 5, 140);

 ctx.fontStretch = "extra-condensed";
 ctx.fillText(`Witaj! (${ctx.fontStretch})`, 5, 170);

 ctx.fontStretch = "semi-expanded";
 ctx.fillText(`Witaj! (${ctx.fontStretch})`, 5, 200);

 ctx.fontStretch = "expanded";
 ctx.fillText(`Witaj! (${ctx.fontStretch})`, 5, 230);

 ctx.fontStretch = "extra-expanded";
 ctx.fillText(`Witaj! (${ctx.fontStretch})`, 5, 260);

 ctx.fontStretch = "ultra-expanded";
 ctx.fillText(`Witaj! (${ctx.fontStretch})`, 5, 290);
 },
 (err) => {
 console.error(err);
 },
);

Opis:
Właściwość CanvasRenderingContext2D.fontStretch określa, w jaki sposób czcionka może być rozszerzana lub zagęszczana podczas rysowania tekstu. Właściwość odpowiada font-stretch właściwości CSS, gdy jest używana ze słowami kluczowymi wartości procentowe nie są obsługiwane. Wartość rozciągnięcia czcionki jako ciąg. To jest jedno z:

ultra-condensed,
extra-condensed,
condensed,
semi-condensed,
normal - domyślnie,
semi-expanded,
expanded,
extra-expanded,
ultra-expanded,

Właściwość można wykorzystać do pobrania lub ustawienia wartości rozciągnięcia czcionki. Załadowanie zmiennej czcionki, którą można zmieniać w osi szerokości. Ponieważ fontStretch można rozciągnąć tylko czcionkę zawierającą informacje o sposobie rysowania glifów po rozciągnięciu. w przeciwnym razie tekst zostanie narysowany przy użyciu najbliższej dostępnej wartości rozciągnięcia czcionki dla danej czcionki, która często będzie miała normalną szerokość.

Zobacz też:
https://fonts.google.com/
https://fonts.google.com/specimen/Inconsolata
https://fonts.googleapis.com/css2?family=Inconsolata