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
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();
}
