我正嘗試用HTML和JavaScript創建一個Mondrian

我已經爲Uni創建了一個任務，創建了Mondrian，其項目目標是編寫代碼以在畫布內的隨機位置生成100個隨機大小的矩形。我正嘗試用HTML和JavaScript創建一個Mondrian

我已經嘗試它，它看起來像這樣（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); 
} 
}

我需要如何讓矩形來一次形成所有援助，因爲到目前爲止，矩形每次只出現一次，每次運行或刷新頁面。

來源

2016-12-12 westan25

可憐的老懞德里安 - 他是個通神論者，而不是一個隨機的數學家:( –

@ westan25你在這些編輯做它不會在所有你的問題提高 – Kaiido

我？需要以某種方式隱藏它，因爲我的學期還沒有結束，其他人可以很容易地複製代碼 – 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並不像Mondrian那樣.io/robertspier/pen/zoJPxK – Roberrrt

@Roberrrt，也許你需要[一些顏色]（http://codepen.io/anon/pen/ENebVZ）（這不是由Mondrian隨機挑選的） – Kaiido

爲什麼它還沒有生產100平方米？ :( 哦，另外，我怎樣才能使矩形中沒有任何填充，只是線條？是不是隻是無用的代碼或編碼爲白色？每當我這樣做，矩形合併爲一。 – westan25

我正嘗試用HTML和JavaScript創建一個Mondrian

回答

相關問題