Malen
Ein kleines Malprogramm: Mit Mausklicks setzt ihr farbige Punkte auf eine Zeichenfläche — Farbe und Punktgröße sind frei wählbar.
Dieses Script von W. Zenk beschert den Besuchern eurer Homepage ein kleines Malprogramm. Mit jedem Klick auf die umrahmte Fläche wird dort ein farbiger Punkt gesetzt — nach und nach entsteht so ein Bild aus lauter Farbtupfern.
Zur Auswahl stehen 14 Farben, von Knallrot über Blau- und Grüntöne bis Schwarz und Weiß. Über die Felder „Breite" und „Höhe" bestimmt ihr die Größe der Punkte: Der vorbelegte Wert 10 ergibt kleine Tupfer, mit größeren Werten malt ihr breite Balken oder ganze Flächen. Die beiden Felder X und Y zeigen dabei ständig die aktuelle Position des Mauszeigers an. Probiert es aus!
Technisch ist das Script ein schönes Beispiel dafür, wie JavaScript neue Elemente in eine Seite einfügen kann: Jeder Punkt ist in Wirklichkeit ein kleines, absolut positioniertes <div> mit farbigem Hintergrund. Ein „Radiergummi" ist übrigens eingebaut, ohne dass es einen eigenen Knopf bräuchte — malt einfach mit der Farbe Weiß über eure Punkte.
Wer lieber mit Zeichen statt mit Farbtupfern gestaltet, findet im selben Fach den Rohrmaker, mit dem sich Röhrensysteme aus Rahmenzeichen zusammenklicken lassen.
Setzt mit Mausklicks Punkte auf die Fläche!
So funktioniert das Script
Das Script besteht aus zwei Teilen: Ein Teil verfolgt ständig die Mausposition und zeigt sie in den Feldern X und Y an, der andere reagiert auf Klicks in die Malfläche und setzt dort den Farbpunkt. Beides steckt in einer sofort ausgeführten Funktion, damit die Variablennamen nicht mit anderen Scripts kollidieren.
document.addEventListener("mousemove", function (e) {
document.getElementById("posx").value = e.pageX;
document.getElementById("posy").value = e.pageY;
});Der Positionsanzeiger: mousemove feuert bei jeder Mausbewegung, und das Ereignisobjekt e liefert mit pageX und pageY die Koordinaten des Zeigers — gemessen von der linken oberen Ecke der gesamten Seite, mitgescrollt inklusive. Das Original von 2007 brauchte für dieselbe Information noch eine Weiche zwischen zwei Browserwelten (window.event.x für den alten Internet Explorer); heute verstehen alle Browser den Standardweg.
flaeche.addEventListener("click", function (e) {
const rahmen = flaeche.getBoundingClientRect();Der Mal-Teil hängt am click-Ereignis der Fläche. getBoundingClientRect() misst, wo die Malfläche gerade im sichtbaren Fensterausschnitt liegt. Zieht man diese Ecke von der Klickposition e.clientX/e.clientY ab (beide ebenfalls relativ zum Fensterausschnitt), erhält man die Position innerhalb der Fläche — der Punkt landet dadurch immer exakt unter dem Mauszeiger, egal wo die Fläche auf der Seite sitzt und wie weit gescrollt wurde.
const punkt = document.createElement("div");
punkt.style.position = "absolute";
punkt.style.width = document.getElementById("paintwidth").value + "px";
punkt.style.height = document.getElementById("paintheight").value + "px";Hier entsteht der eigentliche Farbpunkt: document.createElement("div") erzeugt ein nagelneues, noch unsichtbares Element. Anschließend bekommt es per style seine Eigenschaften — absolute Positionierung sowie Breite und Höhe aus den beiden Eingabefeldern, jeweils mit angehängtem "px", denn CSS erwartet Maßangaben mit Einheit.
punkt.style.left = (e.clientX - rahmen.left - 5) + "px";
punkt.style.top = (e.clientY - rahmen.top - 10) + "px";
punkt.style.backgroundColor = document.getElementById("color").value;
flaeche.appendChild(punkt);Die berechnete Klickposition wird als left und top gesetzt (die kleinen Abzüge von 5 und 10 Pixeln stammen aus dem Original und rücken den Punkt unter die Zeigerspitze). Die Farbe kommt aus der Auswahlliste: Jede <option> trägt in ihrem value den Hex-Farbwert, etwa #FF0000 für Knallrot. Erst appendChild() hängt das fertige Element in die Malfläche ein — ab diesem Moment ist der Punkt sichtbar. Das umgebende overflow: hidden der Fläche sorgt dafür, dass große Punkte am Rand sauber abgeschnitten werden.
Zum Anpassen: Neue Farben ergänzt ihr als weitere <option value="#RRGGBB">-Zeilen in der Auswahlliste, die Größe der Malfläche ändert ihr über max-width und height im style-Attribut des <div id="malflaeche">. Wer runde Tupfer statt eckiger möchte, gibt dem Punkt eine Zeile punkt.style.borderRadius = "50%"; mit.
Script für die eigene Homepage
Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.