-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathboxes.html
46 lines (36 loc) · 1.29 KB
/
boxes.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html>
<body width="100%" height="100%">
<canvas></canvas>
<script>
const canvas = document.querySelector("canvas");
const context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context.fillStyle = 'powderblue'
context.fillRect(0, 0, canvas.width, canvas.height);
const lineWidth = 4;
const howManyBoxes = 5;
const howSmaller = 0.6;
const bounds = Math.min(canvas.width, canvas.height);
const margin = Math.floor(bounds * 0.2 / 2);
const gap = 30;
const wall = Math.floor(((bounds * 0.8) - (gap * (howManyBoxes-1))) / howManyBoxes);
const smallerWall = wall * howSmaller;
context.lineWidth = lineWidth;
context.strokeStyle = 'white';
for (let i = 0; i < 5; i++){
const xPos = i * (wall+ gap) + margin;
for (let j = 0; j < 5; j++){
const yPos = j * (wall+ gap) + margin;
context.rect(xPos, yPos, wall, wall);
context.stroke();
if (Math.random(1) > 0.5) {
const movePos = (wall - smallerWall)/2;
context.rect(xPos + movePos, yPos + movePos, smallerWall, smallerWall);
context.stroke();
}
}
}
</script>
</body>
</html>