kostenloser Webspace werbefrei: lima-city

Canvas - Text ist unscharf

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   toolz

   

   toolz hat kostenlosen Webspace.

   18:18, 23.1.2011

   Ich programmiere seit geraumer Zeit mit Canvas. Jetzt bin ich auf einen Schönheitsfehler gestoßen, und zwar wird mein Text nicht sauber angezeigt. Er verschwimmt leider im Hintergrund. Ich benutze die Funktion "fillText" und die Farbe "#FFF" ohne Transparenz. Anscheinend wird das Bild vorher kompressioniert und so verschwimmen die Buchstaben.
   Hier mal ein Beispiel: http://www.toolz.lima-city.de/canvas.png Oben ist der selbe Text mit den selben Eigenschaften, mit HTML erzeugt, unten ist er in einem Canvas Objekt.
   
   Wie kann ich denn nun diesem Verschwimmen entgegenwirken?

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. t-bone

   t-bone hat kostenlosen Webspace.

   14:57, 1.2.2011

   Besteht das Problem weiterhin?
   
   Ich kann das so nicht reproduzieren , poste doch mal ein Stück von deinem Code.
4. Autor dieses Themas

   toolz

   

   toolz hat kostenlosen Webspace.

   18:29, 11.2.2011

   Das kann ich machen, das wird aber nicht sonderlich hilfreich sein:
   

   [...]
   canvas.save(); // Der (halbtransparente) blaue Hintergrund...
   canvas.fillStyle = "rgba(80, 120, 160, 0.7)";
   canvas.strokeStyle = "#DDF";
   canvas.beginPath();
   [...]
   canvas.fill(); // wurde jetzt gezeichnet.
   canvas.stroke(); // Der weiße Rahmen auch.
   canvas.restore();
   
   canvas.save();
   canvas.font = "15px Orbitron, fantasy";
   canvas.textBaseline = 'top';
   canvas.fillStyle = "#FFF";
   canvas.fillText("Hans", 25, 25); // Hans wird geschrieben.
   [...]

   
   
   Kann mir jetzt irgendjemand sagen, woran es liegt?
   Ich habe noch einmal ein bisschen ausprobiert. Die Schriftart ist zwar schon so nicht die feinste, aber auch bei hochauflösenden Schriftarten sieht es nicht besser aus.

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?