Was ist der beste Weg, zu zeichnen, text in einem HTML-canvas-element?
Dem canvas-element leider nicht handhaben text gut. Es gibt eine Reihe von Ansätzen (siehe z.B. http://canvaspaint.org/blog/2006/12/rendering-text/ ), aber meistens scheinen, wie hacks. Was kann ich tun, die ist cross-Plattform und gibt mir die Flexibilität, um meine Schriften, wie ich will?
- Dieser link ist alt und die spec es Punkte, hat gewesen aktualisiert, um Konto für einen text-Zeichnungs-api. Für eine ähnliche (und hoffentlich hilfreich) Frage, siehe stackoverflow.com/questions/719848/...
- fillText() wird nur unterstützt, in beta-Versionen von Safari und Firefox (nicht sicher über andere Browser), das macht es nicht sehr nützlich. Die verschiedenen hacks erwähnte in meinem link sind meist cross-Plattform.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Haben Sie angeschaut typeface.js, http://typeface.neocracy.org. Ich höre, es ist ziemlich solide für das schreiben von text. Hier ist von Ihrer Seite:
"typeface.js verwendet Browser' Vektor zeichnen Funktionen zum zeichnen von text in HTML-Dokumente. Für eine gute Weile, Browser haben die Unterstützung für Vektor-Zeichnung-Firefox -, Safari-und Opera-Unterstützung der
<canvas>
- element (auch als SVG) und der IE unterstützt VML.Den typeface.js Projekt hat zwei Komponenten: das perl-Modul zum konvertieren von Schriftarten, und die javascript-Bibliothek zum zeichnen im browser. Das perl-Modul extrahiert glyph-outline-Informationen von truetype-Schriften und schreibt, die Daten im JSON-format. Die javascript-Bibliothek durchläuft dann das HTML-Dokument und rendert text mit
<canvas>
oder VML-Grafiken zu zeichnen der Glyphen.In Browsern, die das unterstützen
<canvas>
die text ist frei wählbar, aber Sie haben zu glauben. Wie Sie wählen, es gibt kein feedback, keine Hervorhebung, Sie wissen zu lassen, dass es funktioniert. Zukünftige arbeiten werden darauf abzielen, besser umsetzen, cross-browser-Unterstützung für das auswählen von text mit Hervorhebung." (Zitat aus http://typeface.neocracy.org/usage.html)Wenn Sie möchten, verwenden Sie die HTML5-text-Methoden, sollten Sie versuchen, diese Bibliothek : http://code.google.com/p/canvas-text/
Ich bin der Hauptentwickler, so kann ich helfen, und nehmen Sie die änderungen wirklich schnell.
Demos sind hier : http://canvas-text.googlecode.com/svn/trunk/examples/index.html
Es ist noch im alpha-Stadium, so dass jeder bug-report und feedback sind herzlich willkommen ! 🙂