私はHTMLとJavaScriptを使ってモンドリアンを作成しようとしています

私はプロジェクトの目的でMondrianを作成するためのUniの割り当てを受けましたキャンバス内のランダムな場所に100個のランダムなサイズの四角形を生成するコードを書く。 Javascriptを私は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); } }

<!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>

（HTML）私はそれをしようとしてきたし、それはこのようになります

長方形は、ページを実行または更新するたびに、一度に1つずつ表示されます。

出典

2016-12-12 westan25

貧しい古いモンドリアンは - ？。彼はtheosophist、ないランダムな数学者:( –

@ westan25あなたはこれらの編集をやっているそれはすべてあなたの質問では改善されない – Kaiido

Iました私の学期がまだ終了しておらず、他の人がコードを簡単にコピーできるので、何とかそれを隠す必要があります。 – westan25

ループ内で位置とサイズの宣言を移動する必要があります。あなたのコードでは、サイズと位置を一度だけ宣言してから、それを100回再描画します。

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>

出典

2016-12-12 13:27:47 synthet1c

ランダムサイドノート：http：// codepen .io/robertspier/pen/zoJPxK – Roberrrt

@Roberrrt、多分あなたは[いくつかの色]（http://codepen.io/anon/pen/ENebVZ）（それらはまだモンドリアンによって選ばれていません） – Kaiido

100個の正方形を作りますか？ :( ああ、どのように矩形を作成するのですか？行を挿入するのはどうですか？nofillコードではなく、白くなるようにコーディングするのですか？そうするたびに、長方形は1つにマージされます。 – westan25

私はHTMLとJavaScriptを使ってモンドリアンを作成しようとしています

答えて

関連する問題