Auf Thema antworten 2026

Beitrag

<blockquote data-quote="IVIrcus" data-source="post: 1997744" data-attributes="member: 568106">Moin allerseits, &nbsp;ich stehe bei der Umsetzung eines HTML5 Projektes (canvas) auf dem Schlauch. Meine Absicht ist es u.a. eine kleine Straße zu simulieren, in dem sich dich Straßenmarkierungen (Mittelstreifen - gestrichelt) bewegen. &nbsp;Auf folgende Art erreiche ich, dass sich eine einzelne Linie schräg abwärts bewegt. (Man schaut seitlich auf die Straße). Ziel ist es aber, dass über die gesamte Canvas-Height mehrere Striche verlaufen.Nach Möglichkeit müssten die Striche oben (sprich i.d. Nähe des Horizonts) kleiner und enger beieinander liegen, hingegen am unteren Rand länger und weiter auseinander erscheinen.&nbsp;Ich hoffe, ich konnte es einigermaßen verdeutlichen und bin zudem hier nicht gänzlich falsch aufgehoben.&nbsp;Danke für Eure Mühe.Marcus&nbsp;[CODE]var WIDTH = 400;var HEIGHT = 300;var x_start = 100;var y_start = 0;var x_linie = 4;var y_linie = 16;var x_abstand = 2;var y_abstand = 8;&nbsp;&nbsp;&nbsp;window.onload = function() {&nbsp;function init() {&nbsp; var canvas = document.getElementById(&quot;canvas&quot;);&nbsp; var context = canvas.getContext(&quot;2d&quot;);&nbsp; return setInterval(draw, 10);}&nbsp;function draw () {&nbsp;clear();&nbsp;context.fillStyle = &quot;#333&quot;;&nbsp;context.rect(0,0,WIDTH, HEIGHT);&nbsp;context.strokeStyle = &quot;#FFFFFF&quot;;&nbsp;&nbsp;context.beginPath();&nbsp;context.moveTo(x_start = x_start - x_abstand, y_start = y_start + y_abstand);&nbsp;//erzeugt vom Ausgangspunkt den Linienabstand&nbsp;&nbsp;context.lineTo(x_start = x_start - x_linie, y_start = y_start + y_linie);&nbsp;//erzeugt die Linie&nbsp;if ( (y_start &lt; 300) { //Ist Linienhöhe am unteren Rand des canvas, wird wieder zum Ursprungs-Ausgangspunkt gewechselt&nbsp;}&nbsp;else {&nbsp;&nbsp; x_start = 100;&nbsp;&nbsp; y_start = 0;&nbsp;}}init();&nbsp;}[/CODE]</blockquote>

[QUOTE="IVIrcus, post: 1997744, member: 568106"] Moin allerseits, ich stehe bei der Umsetzung eines HTML5 Projektes (canvas) auf dem Schlauch. Meine Absicht ist es u.a. eine kleine Straße zu simulieren, in dem sich dich Straßenmarkierungen (Mittelstreifen - gestrichelt) bewegen. Auf folgende Art erreiche ich, dass sich eine einzelne Linie schräg abwärts bewegt. (Man schaut seitlich auf die Straße). Ziel ist es aber, dass über die gesamte Canvas-Height mehrere Striche verlaufen. Nach Möglichkeit müssten die Striche oben (sprich i.d. Nähe des Horizonts) kleiner und enger beieinander liegen, hingegen am unteren Rand länger und weiter auseinander erscheinen. Ich hoffe, ich konnte es einigermaßen verdeutlichen und bin zudem hier nicht gänzlich falsch aufgehoben. Danke für Eure Mühe. Marcus [CODE] var WIDTH = 400; var HEIGHT = 300; var x_start = 100; var y_start = 0; var x_linie = 4; var y_linie = 16; var x_abstand = 2; var y_abstand = 8; window.onload = function() { function init() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); return setInterval(draw, 10); } function draw () { clear(); context.fillStyle = "#333"; context.rect(0,0,WIDTH, HEIGHT); context.strokeStyle = "#FFFFFF"; context.beginPath(); context.moveTo(x_start = x_start - x_abstand, y_start = y_start + y_abstand); //erzeugt vom Ausgangspunkt den Linienabstand context.lineTo(x_start = x_start - x_linie, y_start = y_start + y_linie); //erzeugt die Linie if ( (y_start < 300) { //Ist Linienhöhe am unteren Rand des canvas, wird wieder zum Ursprungs-Ausgangspunkt gewechselt } else { x_start = 100; y_start = 0; } } init(); } [/CODE] [/QUOTE]

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?