-
Notifications
You must be signed in to change notification settings - Fork 0
/
hello.html
42 lines (36 loc) · 1.33 KB
/
hello.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
<html>
<body>
<canvas width="600" height="600"></canvas>
<script>
let canvas = document.querySelector('canvas');
let context = canvas.getContext('2d');
// context.fillStyle = 'blue'
// context.fillRect(100,100,400,400); // draws, fills, sets colour
context.lineWidth = 4;
context.beginPath();
context.rect(100,100,400,400); // x,y,width,height
// context.stroke();
context.beginPath();
context.arc(300,300,100,0,Math.PI*2); // x,y,radius,start rad,end rad
// context.stroke();
const width = 60;
const height = 60;
const gap = 20;
let x, y;
for (let i = 0; i < 5; i++) {
for (let j = 0; j < 5; j++) {
x = 100 + (width + gap) * i;
y = 100 + (height + gap) * j;
context.beginPath();
context.rect(x,y,width,height);
context.stroke();
if (Math.random() > 0.5) {
context.beginPath();
context.rect(x+8,y+8,width-16,height-16);
context.stroke();
}
}
}
</script>
</body>
</html>