DeusFigendi (noReg): Canvas: Textbreite ermitteln

Guten Morgen,
ich arbeite gerade ein wenig mit dem Canvas-Element und habe Strings, die ich da drauf schreibe, die ich gerne einfach abschneiden würde, soweit sie zu lang werden.
Gibt es eine Funktion (oder Methode oder Formel oder so), die das für mich erledigt, also mir ausgibt, wie lang (in Pixeln) ein String werden wird, wenn Schriftart, -Größe und Inhalt bekannt sind?

Oder gibt es vielleicht eine passable Annäherung z.B. wie breit Zeichen durchschnittlich sind, wobei man dabei vermutlich auch die Häufigkeit berücksichtigen muss (also häufige Zeichen für den Schnitt höher gewichten)?
Ich könnte mir z.B. vorstellen, dass das x eine gute Annäherung ist, weil die f und i die Stings kürzer und die w und m sie länger machen... oder so.

Konkret geht es derzeit um 12px TNR, aber ich weiß nicht ob ich dabei bleibe.

  1. Es gibt meines Wissens keine vorgefertigte Lösung für dieses Problem - aber eine selbstgebaute dürfte gehen: dazu macht man ein zusätzliches Canvas mit ausreichender Breite (die man einfach anhand der Zeichenlänge und -größe bestimmt und noch Sicherheitsabstand einplant und schnappt sich dann die mittlere Zeile, um festzustellen, ab wann das erste Pixel gesetzt ist - in dessen Umgebung sucht man dann nach einem Pixel, welches weiter hinten ist.

    Gruß, LX

    --
    RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.
  2. Hi,

      
    var ctx = document.getElementById('canvas').getContext('2d');  
    ctx.font = "32pt Arial";  
    alert("Breite von 'Hallo Welt!' ist :" + ctx.measureText("Hallo Welt!").width);  
    
    

    Funktioniert zumindest in meinem Chrome.

    ~dave

    1. Das hat sehr gut funktioniert (Fx4), dankeschön!

    2. Erstaunlich, das kannte ich gar nicht. Klappt offenbar auch in Firefox 3.6.

      Gruß, LX

      --
      RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.