Das Canvas-Element behandelt leider keinen Text gut. Es gibt eine Reihe von Ansätzen (siehe z. B. http://canvaspaint.org/blog/2006/12/rendering-text/), aber sie erscheinen meistens wie Hacks. Was kann ich tun, das ist plattformübergreifend und gibt mir die größte Flexibilität, um meine Schriften so zu gestalten, wie ich es möchte?Was ist der beste Weg, um Text auf einem HTML-Canvas-Element zu zeichnen?
Haben Sie sich typeface.js, http://typeface.neocracy.org angesehen. Ich habe gehört, dass es ziemlich solide ist, um Texte zu schreiben. Hier ist von ihrer Website:
"typeface.js verwendet Browser Vektor-Zeichenfunktionen, um Text in HTML-Dokumenten zu zeichnen. Für eine gute Weile haben Browser Unterstützung für Vektor-Zeichnen - Firefox, Safari und Opera unterstützen das <canvas> Element (ebenso wie SVG), und IE unterstützt VML
Das Projekt typeface.js besteht aus zwei Komponenten: dem Perl-Modul zum Konvertieren von Schriften und der JavaScript-Bibliothek zum Zeichnen im Browser.Das Perl-Modul extrahiert Glyphenumrissinformationen aus TrueType-Schriftarten und schreibt diese Daten im JSON-Format Die Javascript-Bibliothek durchläuft dann das HTML-Dokument und rendert Text unter Verwendung von <canvas> oder VML, um die Glyphen zu zeichnen
In Browsern, die <canvas> unterstützen, ist der Text wählbar, aber Sie müssen Vertrauen haben. Wenn Sie auswählen, gibt es kein Feedback, keine Hervorhebung, um Sie wissen zu lassen, dass es funktioniert. Zukünftige Arbeiten werden darauf abzielen Unterstützung besser, Cross-Browser zur Auswahl Text implementieren mit Hervorhebung „(Zitat von http://typeface.neocracy.org/usage.html)
Wenn Sie die HTML5-Text Methoden verwenden möchten, sollten Sie diese Bibliothek versuchen. http://code.google.com/p/canvas-text/ ich bin . Hauptentwickler, ich kann so helfen, und Änderungen vornehmen, wirklich schnell
Die Demos sind hier: http://canvas-text.googlecode.com/svn/trunk/examples/index.html
Es ist immer noch im alpha-Stadium, so dass jeder Fehlerbericht und Feedback ist willkommen :)
That Der Link ist alt und die Spezifikation, auf die er verweist, wurde aktualisiert Konto für eine Textzeichnung API. Für eine ähnliche (und hoffentlich hilfreiche) Frage, siehe http://stackoverflow.com/questions/719848/how-do-you-dreed-text-on-a-canvas-tag-in-safari –
fillText() ist nur unterstützt in Beta-Versionen von Safari und Firefox (nicht sicher über andere Browser), was es nicht sehr nützlich macht. Die verschiedenen Hacks in meinem Link sind meist plattformübergreifend. – swampsjohn