forked from marijnh/Eloquent-JavaScript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path17_1_shapes.html
More file actions
66 lines (60 loc) · 1.61 KB
/
17_1_shapes.html
File metadata and controls
66 lines (60 loc) · 1.61 KB
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!doctype html>
<canvas width="600" height="200"></canvas>
<script>
let cx = document.querySelector("canvas").getContext("2d");
function parallelogram(x, y) {
cx.beginPath();
cx.moveTo(x, y);
cx.lineTo(x + 50, y);
cx.lineTo(x + 70, y + 50);
cx.lineTo(x - 20, y + 50);
cx.closePath();
cx.stroke();
}
parallelogram(30, 30);
function diamond(x, y) {
cx.translate(x + 30, y + 30);
cx.rotate(Math.PI / 4);
cx.fillStyle = "red";
cx.fillRect(-30, -30, 60, 60);
cx.resetTransform();
}
diamond(140, 30);
function zigzag(x, y) {
cx.beginPath();
cx.moveTo(x, y);
for (let i = 0; i < 8; i++) {
cx.lineTo(x + 80, y + i * 8 + 4);
cx.lineTo(x, y + i * 8 + 8);
}
cx.stroke();
}
zigzag(240, 20);
function spiral(x, y) {
let radius = 50, xCenter = x + radius, yCenter = y + radius;
cx.beginPath();
cx.moveTo(xCenter, yCenter);
for (let i = 0; i < 300; i++) {
let angle = i * Math.PI / 30;
let dist = radius * i / 300;
cx.lineTo(xCenter + Math.cos(angle) * dist,
yCenter + Math.sin(angle) * dist);
}
cx.stroke();
}
spiral(340, 20);
function star(x, y) {
let radius = 50, xCenter = x + radius, yCenter = y + radius;
cx.beginPath();
cx.moveTo(xCenter + radius, yCenter);
for (let i = 1; i <= 8; i++) {
let angle = i * Math.PI / 4;
cx.quadraticCurveTo(xCenter, yCenter,
xCenter + Math.cos(angle) * radius,
yCenter + Math.sin(angle) * radius);
}
cx.fillStyle = "gold";
cx.fill();
}
star(440, 20);
</script>