Canvas mit Text füllen

[derletztekick]

Hallo,

ich habe gerstern ein wenig mit dem erstellen von Graphiken angefangen und dabei die Mozillaseite: Drawing Graphics with Canvas als Grundlage genutzt.

Ich möchte damit ein Diagram (Fieberkurve) in meinem JavaScript basierenden Fußballmanager zeichnen. Bisher passiert dies über (viele) 1px große DIVs.

Nun bin ich soweit, dass die Graphik selbst wie gewünscht erzeugt wird, jedoch habe ich bisher nichts gefunden, um auch Text zu erzeugen und zu positionieren. Ich würde gern, wie bei der DIV-Lösung, die Achsen numrisch beschriften und auch die Mannschaftsnamen entsprechend legendieren.

Bisher habe ich dazu wiederum ein paar DIV's eingefügt, was zum einen erstmal keinen Erfolg hatte und zum anderen - hoffentlich - vermeidbar bleibt.

Ich suche also eine Möglichkeit, Text zu erstellen und im Canvas zu positionieren. Hat einer von Euch dazu eine Realisierungsidee oder habe ich schlicht etwas übersehen und es gibt eine Methode wie setText() oder ähnliches?

Mit freundlichem Gruß
Micha

[MudGuard]

Hi,

Mozillaseite: Drawing Graphics with Canvas
Ich suche also eine Möglichkeit, Text zu erstellen und im Canvas zu positionieren.

Auf der von Dir verlinkten Seite steht:

With Firefox 1.5, Firefox includes a new HTML element for programmable graphics. <canvas> is based on the WHATWG canvas specification,

In der dort verlinkten Spezifikation steht (in der Interface-Beschreibung):

// drawing text is not supported in this version of the API
// (there is no way to predict what metrics the fonts will have,
// which makes fonts very hard to use for painting)

==> keine Chance.

Hat einer von Euch dazu eine Realisierungsidee oder habe ich schlicht etwas übersehen und es gibt eine Methode wie setText() oder ähnliches?

Also entweder selber die Buchstaben zeichnen oder mal mit drawImage probieren (Bildchen mit den Mannschaftsnamen und den Ziffern im Graphikprogramm generieren - ändern sich ja nicht sooo oft; ersatzweise serverseitig generieren - aber wenn Du das könntest, könntest Du dort auch gleich die gesamte Graphik generieren und wärst nicht von der clientseitigen canvas-Technik abhängig).

cu,
Andreas

[derletztekick]

Hallo MudGuard,

// drawing text is not supported

==> keine Chance.

Oh, Danke, da habe ich wohl nicht weitgenug geklickt gerstern Abend.

Hat einer von Euch dazu eine Realisierungsidee oder habe ich schlicht etwas übersehen und es gibt eine Methode wie setText() oder ähnliches?

Also entweder selber die Buchstaben zeichnen oder mal mit drawImage probieren

Hmm, gefällt mir beides nicht so recht. Die Zahlen könnte ich mir noch vorstellen aber die Buchstaben zu erzeugen bläht das Script doch ungemein auf... Ein Bild finde ich auch eher unpassend. Schade aber trotzdem Danke für Deine Hilfe!

serverseitig generieren

Es ist ein /einfaches/ JavaScript und soll letztlich auch nur diese Technik nutzen - das nur zur Info.

Mit freundlichem Gruß
Micha

[svg4you]

Tach derletztekick,

Ich suche also eine Möglichkeit, Text zu erstellen und im Canvas zu positionieren. Hat einer von Euch dazu eine Realisierungsidee oder habe ich schlicht etwas übersehen und es gibt eine Methode wie setText() oder ähnliches?

Browser mit <canvas>-Unterstützung sollten auch SVG-fähig sein. Damit stehen wesentlich mehr Möglichkeiten offen.

Man liest sich,
svg4you

[Tim Tepaße]

Hallo,

Browser mit <canvas>-Unterstützung sollten auch SVG-fähig sein. Damit stehen wesentlich mehr Möglichkeiten offen.

Nö. WebKit in der aktuellen, ausgelieferten Version als Safari ist (noch) nicht SVG-fähig. Dafür kann er Canvas, kein Wunder stammt es doch von ihm.

Tim