Zentrieren Sie (proportionale Schriftart) Text in einem HTML5-Canvas

Ich möchte in der Lage sein, einzelne Textzeilen in rechteckigen Bereichen zu zentrieren, die ich berechnen kann. Das einzige, was ich in der 2D-Geometrie auf einer Leinwand erwartet habe, ist, etwas zu zentrieren, dessen Breite Ihnen unbekannt ist.

Ich habe als Problemumgehung gehört, dass Sie den Text in einem HTML-Container erstellen und dann jQuery aufrufen können width() funktionieren, aber ich ?habe die momentane Hinzufügung zum Hauptteil des Dokuments nicht korrekt gehandhabt? und hat eine Breite von 0.

Wenn ich eine einzelne Textzeile habe, die deutlich kürzer ist, als sie den größten Teil der Breite eines Bildschirms ausfüllen würde, wie kann ich dann feststellen, wie breit sie bei einer mir bekannten Schriftgröße auf einer Leinwand sein wird?

Sie können dies tun, indem Sie verwenden MaßText

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d")

canvas.width = 400;
canvas.height = 200;

ctx.fillStyle = "#003300";
ctx.font="20px sans-serif";

var textString = "Hello look at me!!!",
    textWidth = ctx.measureText(textString ).width;


ctx.fillText(textString , (canvas.width/2) - (textWidth / 2), 100);

Live-Demo

Ausführlichere Demo

Wenn Sie nicht unbedingt eine Breite des Textes benötigen, sondern nur den Text zentrieren möchten, können Sie dies tun

  canvas_context.textBaseline="middle";
  canvas_context.textAlign = "center";

Dadurch sollte ein Text sowohl vertikal als auch horizontal zentriert werden.

developer.mozilla.org Staaten in der textAlign Beschreibung, die der Ausrichtung zugrunde liegt auf den x-Wert des Kontextes fillText() Methode. Das heißt, die Eigenschaft zentriert den Text im Zeichenbereich nicht horizontal; es zentriert den Text um die angegebene x-Koordinate. Ähnliches gilt für die textBaseLine.

Um also den Text in beide Richtungen zu zentrieren, müssen wir diese beiden Eigenschaften festlegen und den Text in der Mitte der Leinwand positionieren.

ctx.textBaseline="middle"; 
ctx.textAlign = 'center'; 

ctx.fillText('Game over', canvas_width/2, canvas_height/2);

Sie können verwenden ctx.textAlign = “center”; Objekt mittig auszurichten

var canva = document.getElementById("canvas");
ctx.textAlign = "center"; // To Align Center
ctx.font = "40px Arial"; // To change font size and type
ctx.fillStyle="#313439"; // To give font 
ctx.fillText("Text Center", 150 ,80);

Für die horizontale Zentrierung verwenden wir ctx.textBaseline="middle"; ctx.textAlign = 'center';. Aber um vertikal zu zentrieren, müssen wir verwenden ctx.measureText.

(actualBoundingBoxAscent - actualBoundingBoxDescent) / 2 ist wichtig, da Text für verschiedene Schriftarten unterschiedlich vertikal ausgerichtet werden kann.

// https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry/59143499#59143499
function setCanvas(canvas, w, h) {
    canvas.style.width = w + 'px';
    canvas.style.height = h + 'px';
    const scale = window.devicePixelRatio;
    canvas.width = w * scale;
    canvas.height = h * scale;
    const ctx = canvas.getContext('2d');
    ctx.scale(scale, scale);
}

const width = 160;
const height = 160;
const fontSize = 100;
const text="A";

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

setCanvas(canvas, width, height); 

ctx.fillStyle="red";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle="white";
ctx.font = `${fontSize}px sans-serif`;
ctx.textBaseline="middle";
ctx.textAlign = 'center';
let { actualBoundingBoxAscent, actualBoundingBoxDescent } = ctx.measureText(text);
ctx.fillText(text, width / 2, height / 2 + (actualBoundingBoxAscent - actualBoundingBoxDescent) / 2);

canvas{
  outline: 1px black solid
 }

<canvas><canvas>

Für diejenigen, die sich fragen, wie sie die Höhe auch richtig ausrichten können measureText() gibt die Höhe nicht zurück (!).

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

const centered = (text, size) => {
  ctx.font = size + 'px monospace';
  let s = ctx.measureText(text).width;
  ctx.fillText(text, canvas.width / 2 - s / 2, canvas.height / 2 + size / 4);
}  
    
/* Just for the demo, really! 
 * Please don't do this!
 * Use proper animation frames requests
 * and clear timeout(s)!!! */
[["is", 40], ["able",45], ["<-- to -->",50], ["FLEX", 55], [" SMOOTH!", 58], ["FLEX!!", 62], ["FLEX!!!", 63] ].forEach((e) => {
  setTimeout(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    centered(e[0], e[1])
  }, e[1]*100)
})

// Intro test
centered("CANFLEX", 50)

canvas{
  outline: 1px black solid
 }

<canvas><canvas>

Was Sie tun, ist, Ihren Text mit einem negativen Texteinzug außerhalb des Bildschirms zu rendern und dann die Größe zu erfassen.

text-indent: -9999px

Siehe: Text mit “text-indent” ausblenden