Anzeige:
Ergebnis 1 bis 7 von 7

Thema: HTML5, Canvas und Transformationen

  1. #1
    Registrierter Benutzer Avatar von BlueJay
    Registriert seit
    27.08.2004
    Beiträge
    825

    HTML5, Canvas und Transformationen

    Hallo, Leute,

    Nachdem ich herausgefunden habe, dass man im Canvas-Kontext nicht die Elemente transformiert, sondern den Canvas,
    dachte ich so in meinem spätjugendlichem Leichtsinn, dass man da ein schönes "Erdbeben" simulieren kann, indem man
    ein paar passend getimte translates auf den Canvas-(context) loslässt.

    Code: ctx ist der Canvas-Kontext
    Code:
    function wackeln()
    { ctx.save();
      ruettel(10);
    }
    function ruettel(nr)
    {  if (nr>0) 
       { ctx.translate(16.0*Math.random()-8.0,8.0*Math.random()-4.0);
         zeige_staebe();
         setTimeout('ruettel('+(nr-1)+')',50);
       }
       else 
       { ctx.restore();
         zeige_staebe();
    	 gameover(1);
       }
    }


    Das klappte gut mit 4 Objekten, aber bei 41 schneckt Mozilla doch ziemlich. Das kann Java ja besser, auch wenn man
    dort die Einzelobjekte bewegt.

    nächster Versuch:
    alle Objekte wurde "zu Fuß" versetzt, das war trotz etlicher Kommandos geringfügig schneller (kein Vergleich zu Java!)

    Frage:
    Gibt es was Schnelleres, um alle Objekte eines Canvasses (simultan) zu bewegen? Eine Phase sollte nicht länger als 50ms
    dauern.

    Gruß,
    Ulrike
    Eigentlich ganz einfach, wenn man's weiss!

  2. #2
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255
    Es gäbe noch die Möglichkeit mit requestAnimationFrame
    Ist aber stark Browser Versions abhängig.
    https://developer.mozilla.org/en/DOM...AnimationFrame
    Für IE.. siehe http://ie.microsoft.com/testdrive/Default.html

    DEMO: http://ie.microsoft.com/testdrive/Gr...e/Default.html
    Geändert von undefined (07-09-2011 um 15:09 Uhr) Grund: Demo
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

  3. #3
    Registrierter Benutzer Avatar von BlueJay
    Registriert seit
    27.08.2004
    Beiträge
    825
    ... na das sind ja wirklich noch "ganz rohe Eier",
    (http://www.w3.org/TR/animation-timing/)

    Die Demo-Uhr hat ja wohl absolut nicht viel zu tun.

    Aber ist es nicht beruhigend, dass Mozilla und IE schon denselben Working Draft vom W3C zitieren?

    Mittlerweile habe ich mir so geholfen, dass nur die beteiligten Stäbe wackeln, das kann man verschmerzen.

    Die Technik in diesem Link scheint auch interessant:
    http://hacks.mozilla.org/2011/08/ani...nimationframe/

    aber mein Grundproblem ist ja, dass die Berechnung der Bilder vor dem Neuzeichnen zu lange dauert, und mein Verdacht ist es, dass die Canvas-Translates einfach kein "Blitter-Gewitter" machen, sondern alle Punkte Objekt für Objekt mühsam neu berechnen.

    Gruß,
    Ulrike

    p.s. mein Testlink hat sich geändert auf
    http://www.gamecraft.de/mikado/index.htm
    Eigentlich ganz einfach, wenn man's weiss!

  4. #4
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255
    Hast du den Fische Test mal ausprobiert?
    http://ie.microsoft.com/testdrive/Pe...l/Default.html
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

  5. #5
    Registrierter Benutzer Avatar von BlueJay
    Registriert seit
    27.08.2004
    Beiträge
    825
    Mozilla:
    Frame Counts von ummi 3
    Rotes Wasser
    Gradienten scheinen noch ganz schön alles auszubremsen.
    Und beim Sprung von 10 auf 50 Fische scheint sich alles bei einigen Grad über 0 abzuspielen

    IE:
    Frame Counts von ummi 30
    oops, tadellos! Sogar blaues Wasser mit echten Wellen!
    Und bei 50 Fischen noch 'nen Benchmark von 26!

    Chrome:
    etwas langsamer als Mozilla (2), aber blaues Wasser mit Wellen
    dafür rühren sich die Fische kaum. Das Ganze geht hoch auf 3, wenn man Gradienten abschaltet.
    Den 50-Fische-Test habe ich lieber nicht ausgeführt.

    Opera:
    siehe Mozilla

    Scheint wohl für IE optimiert worden zu sein:
    Das Wasser wird durch ein Video abgebildet.

    Die Fische sind, wie meine Spieße, transformierte Canvas-Images.
    Ansonsten wird schwer mit Opacity gearbeitet.

    Das war's, was mir beim 1. Blick so auffiel.

    Gruß,
    Ulrike
    Eigentlich ganz einfach, wenn man's weiss!

  6. #6
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255
    Dein Mozilla läuft im Sicheren Modus.
    Siehe bei Firefox ab Version 6 unter about:config
    Code:
    layers.acceleration.force-enabled
    webgl.force-enabled
    Ich habe bei Firefox mit 250 = 60fps CPU 25% zwei Kerne
    Danach geht es abwärts.
    http://www.bitblokes.de/2011/05/fire...ng-bereinigen/

    Du kommst bei SVG einfach nicht mehr an der GPU vorbei.
    Bei KDE3 oder Inkscape hatte man schon mit einfachen Grafiken erhebliche Performance Probleme.
    Geändert von undefined (10-09-2011 um 11:28 Uhr)
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

  7. #7
    Registrierter Benutzer Avatar von BlueJay
    Registriert seit
    27.08.2004
    Beiträge
    825
    Damit hast Du gerade fast meine nächste Frage beantwortet. Dummerweise bin ich schon ein Update weiter und auf Windows, an diese Schraube komme ich so nicht ran. Und Hardware-Beschleunigung hat schon seinen Haken.

    Ich bastele gerade an Kollisions-Detektionen auf dem Canvas via Maske.

    Die Zeile
    Code:
    var idata=cctx.getImageData(mx,my,1,1); // liefert 4 Daten: r,g,b,a
    gab mir im Firefox einen Security error, im IE lief alles wunderbar!

    Und wie beschrieben, glaubt der FF wohl, das Bild kommt aus einer anderen Domain.
    Online tut FF, was er soll.


    Gruß,
    Ulrike
    Geändert von BlueJay (11-09-2011 um 12:52 Uhr) Grund: Zusatzinfo
    Eigentlich ganz einfach, wenn man's weiss!

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •