Question

我为Uni创建了Mondrian的任务，目的是让项目编写代码，在画布中的随机位置生成100个随机大小的矩形。

我尝试了它，它看起来像这样（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);
}
}

我需要有关如何一次性形成所有矩形的帮助，因为到目前为止，每次运行或刷新页面时，矩形一次只出现一个。

Answer 1

您需要在循环内移动您的位置和大小声明。在你的代码中，你只声明一次大小和位置，然后重绘100次。

＆＃13;

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

＆＃13;

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

＆＃13;

我正在尝试使用HTML和JavaScript创建一个Mondrian

1 个答案: