Canvas: Wie handle ich ctx.fillRect und transparence

  • Grüß Gott,


    irgendwie bekomme ich es nicht hin, dass eine Schrift vor einem farbigen Hintergrund zu lesen ist.

    Ich habe es mit ctx.globalAlpha = 0.2 probiert, hat mal funktioniert, dann wieder nicht. Warum?? Keine Ahnung.


    ctx1.fillStyle = 'red';

    ctx1.fillText(("Anzeige Zahlen"),links + 10,100+gFont+ recHoehe/2);

    ctx1.fillRect(links,100,200,60);

    ctx1.stroke();

    Ich möchte dass Rechteck rot und davor die Schrift in Schwarz.


    Und dann noch eine Frage.



    ctx1.fillStyle = '#FB0716';

    ctx1.fillText(("Anzeige Zahlen"),links + 10,100+gFont+ recHoehe/2);

    ctx1.fillRect(links,100,200,60);

    ctx1.stroke();



    ctx2.fillText(("Punkte"),links + 250 +10,100+gFont+ recHoehe/2);

    ctx2.fillRect(links+250,100,100,60);

    ctx2.stroke();


    Genauso wenn ich am Anfang schreibe

    ctx1.font = 20px Arial";


    , dann haben alle

    var c = document.getElementById("myCanvas");

    var ctx = c.getContext("2d");

    var ctx1 = c.getContext("2d");

    var ctx2 = c.getContext("2d");

    var ctx3 = c.getContext("2d");

    var ctx4 = c.getContext("2d");


    20 px in Ariel?


    Warum?????:cursing::cursing::cursing::cursing::cursing::cursing::evil::evil::evil::evil::evil:


    LG


    Jochen








    warum hat ctx2 die farbe von ctx1. Sind das nicht zwei verschiedene Objekte oder wie man das nennt?


    LG


    Jochen

  • Fehlte noch die Frage:


    Und dann noch eine Frage.



    ctx1.fillStyle = '#FB0716';

    ctx1.fillText(("Anzeige Zahlen"),links + 10,100+gFont+ recHoehe/2);

    ctx1.fillRect(links,100,200,60);

    ctx1.stroke();



    ctx2.fillText(("Punkte"),links + 250 +10,100+gFont+ recHoehe/2);

    ctx2.fillRect(links+250,100,100,60);

    ctx2.stroke();


    warum hat ctx2 die Farbe von ctx1 übernommen?

    Sind doch zwei verschiedene Objekte , oder ????=

  • Zitat

    warum hat ctx2 die farbe von ctx1. Sind das nicht zwei verschiedene Objekte oder wie man das nennt?

    In Javascript ist es i. allg. so, dass mit Referenzen auf Objekte gearbeitet wird. In diesem Fall nehme ich an, dass es das Context-Objekt für ein Canvas nur einmal gibt und dass getContext jeweils nur die Referenz bzw. einen Verweis auf dieses Objekt liefert. Daher wirken die Aktionen, die man darauf anwendet, auf das selbe Objekt.

  • Zitat

    irgendwie bekomme ich es nicht hin, dass eine Schrift vor einem farbigen Hintergrund zu lesen ist.

    Ich habe es mit ctx.globalAlpha = 0.2 probiert, hat mal funktioniert, dann wieder nicht.

    Was soll den transparent sein, die Schrift oder der Hintergrund? Oder das ganze Canvas? Hast Du es mit rgba() versucht?

  • Vielleicht ist transparent nicht richtig. Ich möchte eine schwarze Schrift auf rotem Hintergrund haben.

    So wie zum Beispiel hier auf dieser Seite on Top " HTML Seminar" auf blauem Hintergrund zu sehen ist.



    zu weiter oben .

    es gibt nur das einCanvas :

    1. var c = document.getElementById("myCanvas");


    muss ich dann ,siehe Bild, mehrere Canvas anlegen wenn ich z.B. unterschiedliche Schriften haben will?,

  • Zitat

    muss ich dann ,siehe Bild, mehrere Canvas anlegen wenn ich z.B. unterschiedliche Schriften haben will?,

    Nein, Du kannst die Farben, Schriftarten etc. während des Zeichnens umschalten. fillStyle z. B. wirkt nur auf das, was danach gezeichnet wird und verändert nicht das, was davor gezeichnet wurde. Ich möchte jetzt nicht einsteigen und Beispiele dafür geben, sondern empfehlen lieber gleich eine Bibliothek wie jCanvas zu verwenden. Dort gibt man die Eigenschaften direkt beim Zeichnen des Objektes an und kann sie später auch noch ändern. IMO ist dies wesentlich klarer.

    https://projects.calebevans.me/jcanvas/docs/text/

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!