Felix: Canvas/Farbübergang

Hi

ich hab mich neulich mal mit Canvas in HTML/JS beschäftigt, klappt soweit auch ganz gut. Auch Farbübergänge hab ich schon erfolgreich angewendet. Nur bei einem Fall hab ich noch Probleme: In einem 256x256 Pixel großen Bereich will ich einen "doppelten" Farbübergänge zeichnen. Beispiel:

  • oben links hellblau  rgb(0,255,255)
  • oben rechts blau     rgb(0,0,255)
  • unten links grün     rgb(0,255,0)
  • unten rechts schwarz rgb(0,0,0)

Ich hab schon versucht, 2 Übergänge zu überlappen, aber nicht mit dem gewünschten Ergebnis. Ich hab schon mehrere Kombinationen ausprobiert, u.a. vertikal schwarz nach blau, horizontal transparent nach grün, da kam kein hellblau.
Ich hab auch schon versucht diagonal blau nach grün und quer dazu dann hellblau-transparent-schwarz zu überlenden, aber das gibt keinen fließenden Übergang.
Weiß jemand, wie ich das einfach hin bekomme?
Vielen Dank im Voraus!

mfg
Felix

PS: Das Ganze wird nicht öffentlich und frei verfügbar sein, ich möchte nur ein bisschen spielen ;-)

  1. PS: Das Ganze wird nicht öffentlich und frei verfügbar sein, ich möchte nur ein bisschen spielen ;-)

    hintergrundgrafik?

    1. Hi

      Ich hab das Problem gelöst. Für alle die mal das gleiche Problem haben sollten:

      • Bereich schwarz einfärben (fillStyle,fillRect())
      • ctx.globalCompositeOperation = "lighter";
      • vertikaler Farbübergang blau nach transparent
      • horizontaler Farbübergang grün nach transparent
      • danach nicht vergessen, ctx.globalCompositeOperation zurück auf "source-over" zu setzen, sonst gibt es seltsame Ergebnisse bei weiteren Operationen

      mfg
      Felix