Auf Thema antworten 2026

JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Beitrag: <blockquote data-quote="Duddle" data-source="post: 1997947" data-attributes="member: 17775">AW: Straßenmittelstriche Animiert für HTML5Dein Stil zeigt, dass du nicht oft programmierst. Das ist kein Problem, schließlich ist das Forum für alle Level von Nutzern gedacht.Erstens: Berechnungen der Art "aller x vielen Runden will ich wieder von vorn beginnen" ist ein klassischer Anwendungsfall für <a href="http://de.wikipedia.org/wiki/Modulo#Programmierung" target="_blank">Modulo-Berechnungen</a>. In JavaScript ist das Prozentzeichen % der Modulo-Operator. Beispiel:[HTML]var i = 0;for(...) {  i = (i+1) % 4;  alert(i);}[/HTML]Hier läuft i von 0 bis 3, zurück zu 0, wieder bis 3 usw. Das ist gleichbedeutend mit und offensichtlich kürzer als:[HTML]var i = 0;for(...) {  i = i++;  alert(i);  if(i > 3) {    i = 0;  }}[/HTML]Zweitens: Ich empfehle dir, Zuweisungen nicht in Funktionsaufrufen auszuführen, wie z.B.[HTML]c.moveTo(x = x + start_frei_x, y = y + start_frei_y);[/HTML]Sehr viel übersichtlicher ist[HTML]x = x + start_frei_x;y = y + start_frei_y;c.moveTo(x, y);[/HTML]Das sind zwar zwei Zeilen mehr, aber ich kann viel schneller auffassen was moveTo übergeben wird.Wie sieht dein Ergebnis denn mittlerweile aus? Ist es so erstmal richtig?Ich zeige mal, was ich probehalber geschrieben habe. Mein Ansatz war mit echten Vierecken (einfach nur so), aber die Logik ist natürlich die gleiche: [HTML]var lWidth = 30;var mittelPunkt = WIDTH/2-lWidth/2;ctx.globalCompositeOperation='source-over';ctx.fillStyle="#FF0000";ctx.fillRect(mittelPunkt,0,lWidth,HEIGHT);[/HTML]Das zeichnet den Ausgangsstrich.Um einen statischen "Durchbruch" zu erhalten, zeichne ich ein Rechteck an den Anfang.[HTML]ctx.globalCompositeOperation='destination-out';var lHeight = 50;ctx.fillRect(mittelPunkt,0,lWidth,lHeight);[/HTML]Um das Ding zu bewegen, variiere ich die Ausgangsposition von y und lasse sie von 0 bis Höhe des canvas laufen.[HTML]ctx.globalCompositeOperation='destination-out';var lHeight = 50;dy = (dy + 10) % HEIGHT; // var dy wurde ausserhalb dieser Funktion definiert, d.h. globalctx.fillRect(mittelPunkt,dy,lWidth,lHeight);[/HTML]Jetzt startet das Ding aber schon komplett im Bild, also muss ich es im negativen starten lassen und etwas weiter schieben als vorher: [HTML]ctx.globalCompositeOperation='destination-out';var lHeight = 50;dy = (dy + 10) % (HEIGHT+lHeight);ctx.fillRect(mittelPunkt,dy-lHeight,lWidth,lHeight);[/HTML]Jetzt läuft das Ding schon ohne Unterbrechung durch. Um jetzt mehrere davon zu machen, kann ich es natürlich kopieren und mit etwas Mathe dafür sorgen, dass die sich sauber überschneiden. Der Ansatz ist aber meiner Meinung nach nicht besonders hübsch, deshalb habe ich es anders gemacht. Jede der Freistellen beginnt aller lAbstand Pixel und ist jeweils lHeight Pixel groß. Ich brauche mindestens so viele Freistellen, dass ich die ganze Höhe abdecke, plus ein bisschen mehr für die Übergänge. Sobald die erste Freistelle sich bis zum Anfangspunkt der zweiten Freistelle bewegt hat, geht es wieder von vorn los. Der Code dafür ist dann:[HTML]dy = (dy+5) % lAbstand;for(var y = 0; y <= HEIGHT; y += lAbstand) {    var sy = y + dy;    ctx.fillRect(mittelPunkt,sy-lHeight,lWidth,lHeight);}[/HTML]Im ersten Zustand sieht das also so aus (für HEIGHT=500, lAbstand=200, lHeight=50):[CODE]dy ist anfangs 0;freistelle nummer     sy     sy-lHeight1 (y = 0)        0     -50 //also noch nicht im Bild2 (y = 200)         200     1503 (y = 400)         400     350(danach ist y = 600, damit größer als HEIGHT, also wird die Schleife beendet)[/CODE]Im direkt folgenden Frame:[CODE]dy ist jetzt 5; //entspricht der Geschwindigkeitfreistelle nummer     sy     sy-lHeight1 (y = 0)        5     -45 //jetzt mit 5 Pixeln im Bild2 (y = 200)         205     1553 (y = 400)         405     355[/CODE]Ein paar Frames später kommt der Übergang, wenn dy 5 einen Schritt vor lAbstand ist, in diesem Fall lAbstand-5 = 195:[CODE]dy ist jetzt 195; //entspricht der Geschwindigkeitfreistelle nummer     sy     sy-lHeight1 (y = 0)        195     145 2 (y = 200)         395     3453 (y = 400)         595     545 //ist schon seit 9 Frames nicht mehr zu sehen[/CODE]Jetzt solltest du sehen, dass es der nächste Schritt das gleiche Ergebnis ist wie im 0ten Frame. Die erste Freistelle "rutscht" zu sy=200 und entspricht damit der zweiten Freistelle im 0ten Frame, etc.Laaaaange Rede: ein bisschen Mathe und vorallendingen der nette Modulo-Operator lösen dieses Problem sehr simpel.Das schwierige jetzt ist die Transformation, bisher werden hier zumindest meine Linien nur gerade gezeichnet. Aber ich habe ja verlinkt, welche Möglichkeiten es da theoretisch gibt.Duddle</blockquote> Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung: Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?