Ich versuche ein Mondrian mit HTML und JavaScript zu erstellen

Ich habe eine Aufgabe für Uni bei der Erstellung von Mondrian mit dem Ziel des Projekts Code schreiben, um 100 zufällige Rechtecke an zufälligen Orten innerhalb einer Leinwand zu generieren.Ich versuche ein Mondrian mit HTML und JavaScript zu erstellen

Ich habe es versucht, und es sieht so aus (HTML)

<!doctype html> 
<html lang="en-GB"> 
<head> 
<meta charset="UTF-8"> 
<title>Mondrian</title> 
<script src="Mondrian.js"></script> 
<link rel="stylesheet" href="Canvas style.css"> 
</head> 
<body> 
<canvas id="myCanvas" width=400 height=400> 
Your browser does not support the HTML5 canvas tag</canvas> 
</body> 
</html>

Javascript

window.addEventListener('load', drawMondrian); 
function drawMondrian() 
{ 
var canvas = document.getElementById ('myCanvas'); 
var context = canvas.getContext ('2d'); 
var randomSize = Math.random() * 200; 
var randomXposition = Math.random() * 500; 
var randomYposition = Math.random() * 500; 
var shape = 1; 

for (var i = shape; i < 100; i +=1) 
{ 
context.fillRect (randomXposition, randomYposition, randomSize, randomSize); 
} 
}

Ich brauche Hilfe, wie die Rechtecke zu bekommen alle einmal, weil bisher zu bilden Die Rechtecke erscheinen nur einzeln, jedes Mal wenn ich die Seite aktualisiere oder aktualisiere.

Quelle

2016-12-12 westan25

Armer alter Mondrian - er war ein Theosoph, kein Zufalls Mathematiker :( –

@ westan25 was Sie mit diesen Änderungen nicht tun es überhaupt Ihre Frage nicht verbessern – Kaiido

ich?. muss es irgendwie verstecken, da mein Semester noch nicht zu Ende ist und andere den Code so einfach kopieren können – westan25

Sie müssen Ihre Position und Größenangabe innerhalb der Schleife verschieben. In Ihrem Code deklarieren Sie die Größe und Position nur einmal und zeichnen sie dann 100-mal neu.

window.addEventListener('load', drawMondrian); 
 
    function drawMondrian() 
 
    { 
 
     var canvas = document.getElementById ('myCanvas'); 
 
     var context = canvas.getContext ('2d'); 
 
     var shape = 1; 
 
     var randomSize, randomXPosition, randomYposition; 
 
    
 
     for (;shape < 100; shape += 1) 
 
     { 
 
     randomSize = Math.random() * 200; 
 
     randomXposition = Math.random() * 500; 
 
     randomYposition = Math.random() * 500; 
 
     context.fillRect (randomXposition, randomYposition, randomSize, randomSize); 
 
     } 
 
    }

<canvas id="myCanvas" width=400 height=400> 
 
Your browser does not support the HTML5 canvas tag</canvas>

Quelle

2016-12-12 13:27:47 synthet1c

Random side note: das sieht nicht wirklich wie ein Mondrian obwohl http: // codepen aus .io/robertspwier/pen/zoJPxK – Roberrrt

@Roberrrt, vielleicht brauchst du [einige Farben] (http://codepen.io/anon/pen/ENebVZ) (die nicht zufällig von Mondrian ausgewählt wurden) – Kaiido

irgendeinen Grund, warum es immer noch nicht geht 100 Quadrate produzieren? :( Oh, auch, wie mache ich die Rechtecke haben keine Füllung in ihnen, nur die Zeilen? Ist es nicht nur die NoFill-Code oder Codierung, es weiß zu sein, wenn ich dies tun, die Rechtecke verschmelzen zu einem. – westan25

Ich versuche ein Mondrian mit HTML und JavaScript zu erstellen

Antwort

Verwandte Themen