Auf Thema antworten 2026

Beitrag

<blockquote data-quote="IVIrcus" data-source="post: 1997882" data-attributes="member: 568106">AW: Straßenmittelstriche Animiert für HTML5Moin Duddle und danke für deine Antwort.&nbsp;Handschriftlich (bei der Arbeit IE 8 ) habe ich mich am ersten Teil versucht. Da ich mich erst seit kurzem mit HTML5 und insb. JS beschäftige, werden da noch semantische Fehler enthalten sein. Bitte um Nachsicht...(verkürzend hier einmal ohne Interval und document.get... für ein W: 400 H: 200 canvas)&nbsp;[CODE]var start_frei_x = 4;&nbsp;&nbsp; //start_frei ist der Punkt an dem der Zwischenraum zw. 2 Strichen beginntvar start_frei_y = -16;&nbsp; //ist gleichzeitig die Linienlänge der Sichtbaren Linievar linie_frei_x = 2;&nbsp;&nbsp; //linie_frei ist der Punkt bis zu welchem der Zwischenraum lang istvar linie_frei_y = -8;var x = 50;var y = 200;&nbsp;var i = 0;&nbsp; &nbsp; // i ist der Zähler für 4 Durchläufe (4/4 Bildzustände gibt es)&nbsp;c.beginPath();c.moveTo(100,0);c.lineTo(x, y);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //durchgehende Liniec.globalCompositeOperation = &quot;source-out&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; // alles hiernach wird von Linie abgezogenc.moveTo(x = x + start_frei_x, y = y + start_frei_y);&nbsp; //gehe zum ersten Startpunktc.lineTo(x = x + linie_frei_x, y = y + linie_frei_y);&nbsp; &nbsp; &nbsp; //ziehe Pfad für ersten freien Bereich.... //c.moveTo und c.lineTo x 8 , wäre sicherlich ein Fall für die For-Schleife&nbsp;i++;&nbsp; &nbsp;if (i &lt;=3) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; // 4 x mal soll wie folgt verschoben werden ...start_frei_x = start_frei_x -1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; // ist ein Viertel der sichtbaren Liniestart_frei_y = start_frei_y +4;}else {i = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // wieder von vornex = 50;y = 200;}&nbsp;[/CODE]&nbsp;Meintest du das so? Zumindest mit etwas gutem Willen? <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile&nbsp; &nbsp; :)" loading="lazy" data-shortname=":)" />&nbsp;Vielen Dank nochmal für deine Hilfe und die ausführliche Antwort.</blockquote>

[QUOTE="IVIrcus, post: 1997882, member: 568106"] [b]AW: Straßenmittelstriche Animiert für HTML5[/b] Moin Duddle und danke für deine Antwort. Handschriftlich (bei der Arbeit IE 8 ) habe ich mich am ersten Teil versucht. Da ich mich erst seit kurzem mit HTML5 und insb. JS beschäftige, werden da noch semantische Fehler enthalten sein. Bitte um Nachsicht... (verkürzend hier einmal ohne Interval und document.get... für ein W: 400 H: 200 canvas) [CODE] var start_frei_x = 4; //start_frei ist der Punkt an dem der Zwischenraum zw. 2 Strichen beginnt var start_frei_y = -16; //ist gleichzeitig die Linienlänge der Sichtbaren Linie var linie_frei_x = 2; //linie_frei ist der Punkt bis zu welchem der Zwischenraum lang ist var linie_frei_y = -8; var x = 50; var y = 200; var i = 0; // i ist der Zähler für 4 Durchläufe (4/4 Bildzustände gibt es) c.beginPath(); c.moveTo(100,0); c.lineTo(x, y); //durchgehende Linie c.globalCompositeOperation = "source-out"; // alles hiernach wird von Linie abgezogen c.moveTo(x = x + start_frei_x, y = y + start_frei_y); //gehe zum ersten Startpunkt c.lineTo(x = x + linie_frei_x, y = y + linie_frei_y); //ziehe Pfad für ersten freien Bereich .... //c.moveTo und c.lineTo x 8 , wäre sicherlich ein Fall für die For-Schleife i++; if (i <=3) { // 4 x mal soll wie folgt verschoben werden ... start_frei_x = start_frei_x -1; // ist ein Viertel der sichtbaren Linie start_frei_y = start_frei_y +4; } else { i = 0; // wieder von vorne x = 50; y = 200; } [/CODE] Meintest du das so? Zumindest mit etwas gutem Willen? :) Vielen Dank nochmal für deine Hilfe und die ausführliche Antwort. [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?