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

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次。

  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>

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

问题描述

1 个解决方案

解决方案1
2 2016-12-12 13:27:47

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

问题描述

1 个解决方案

解决方案1 2 2016-12-12 13:27:47

解决方案1
2 2016-12-12 13:27:47