Canvas Element in die gewünschte Position bewegen

Question

Ich habe versucht, überall nach der Antwort zu suchen, aber ich finde es nicht. Aber ich möchte den Text, der von einer Eingabe erstellt wurde, an eine bestimmte Position in der Zeichenfläche verschieben, etwa in der oberen Mitte.

Der Code läuft wie folgt aus: (JSFIDDLE)

<canvas id="canvas" style="background-color: #000" width="800px" height="300px"></canvas> 

<input type="text" id="header-text" placeholder="Your Title"> 

Inzwischen hat die js wie folgt aussieht:

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


    document.getElementById('header-text').addEventListener('keyup', function() { 
    var stringTitle = document.getElementById('header-text').value; 
    console.log(stringTitle) 

    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.fillStyle = '#fff'; 
    ctx.font = 'bold 36px Arial'; 
    ctx.textAlign = 'center'; 
    var text_title = stringTitle; 
    ctx.fillText(stringTitle, 15, canvas.height/2 + 35); 
    }); 

Gibt es eine Möglichkeit, wo ich den Text in der oberen Mitte erzeugt bewegen kann? Vielen Dank!

Answer 1

Nun, Sie können Mathe verwenden, um die richtige Position zu berechnen. Sie verwendet:

ctx.fillText(stringTitle, 15, canvas.height/2 + 35); 

so die Textposition zu oben in der Mitte ändern Sie so etwas wie diese verwenden:

ctx.fillText(stringTitle, canvas.width/2, canvas.height/8 + 35); 

Answer 2

Um Text in oben in der Mitte zu haben:

ctx.fillText(stringTitle, canvas.width/2, 36);

Wo 36 Größe der Schrift ist (Höhe). Wenn Sie beim horizontalen Positionieren von Text mehr Präzision benötigen, können Sie CanvasRenderingContext2D.measureText() verwenden.