[READ-ONLY] Mirror of https://github.com/probablykasper/canvas-experiments. Just me learning to use HTML canvas
canvas-experiments.kasper.space
canvas
html5-canvas
website
One loading animation is now three loading animations
+27
-13
+25
-11
7/main.js
+25
-11
7/main.js
···
17
17
});
18
18
19
19
// c.arc(x, y, radius, startAngle, endAngle, [antiClockwise]);
20
-
var oneP = Math.PI/4;
21
-
22
-
function draw(x, y, radius, startAng, endAng) {
20
+
function draw(x, y, radius, startAng, endAng, liiineWidth, color, clockWise, fill = false) {
23
21
c.beginPath();
24
-
c.strokeStyle = "white";
25
-
c.arc(x, y, radius, startAng, endAng);
26
-
c.stroke();
22
+
c.lineWidth = liiineWidth;
23
+
c.strokeStyle = color;
24
+
c.fillStyle = color;
25
+
if (clockWise) {
26
+
c.arc(x, y, radius, Math.PI*2-endAng, Math.PI*2-startAng);
27
+
} else {
28
+
c.arc(x, y, radius, startAng, endAng);
29
+
}
30
+
if (fill) {
31
+
c.fill();
32
+
} else {
33
+
c.stroke();
34
+
}
27
35
}
36
+
37
+
var lineWidth = 0, increment = true;
38
+
setInterval(function() {
39
+
if (lineWidth == 101) increment = false;
40
+
if (lineWidth == 0) increment = true;
41
+
if (increment) lineWidth++;
42
+
if (!increment) lineWidth--;
43
+
}, 52.25)
28
44
29
45
var start = 0, stop = 0, baseSpeed = 10, speedMultiplier = 2;
30
46
var shapes = [], slice = Math.PI/4, inverted = false, incr = 2, loop = baseSpeed*50; // incrementor
···
46
62
inverted = false;
47
63
}
48
64
49
-
50
-
// var stopToUse = (start/(loop)*Math.PI)%Math.PI*2;
51
-
// var startToUse = (stop/(loop)*Math.PI)%Math.PI*2;
52
-
draw(cw/2, ch/2, 50, startToUse/loop, stopToUse/loop);
65
+
draw(cw/4*1, ch/2, 50, startToUse/loop, stopToUse/loop, 2, "#236568", true);
66
+
draw(cw/4*2, ch/2, 50, startToUse/loop, stopToUse/loop, lineWidth, "#3E3277", false);
67
+
draw(cw/4*3, ch/2, 50, startToUse/loop, stopToUse/loop, 1, "#7D2A6B", true, true);
53
68
if (!inverted) {
54
69
start = start + baseSpeed;
55
70
stop = stop + baseSpeed * speedMultiplier;
···
57
72
start = start + baseSpeed * speedMultiplier;
58
73
stop = stop + baseSpeed;
59
74
}
60
-
console.log(`${startToUse} ${stopToUse}`)
61
75
}
62
76
animate();
+1
-1
index.html
+1
-1
index.html
···
10
10
</head>
11
11
12
12
<body>
13
-
<a href="7">7. Fancy loading animation</a>
13
+
<a href="7">7. Three fancy loading animations</a>
14
14
<a href="5">5. and now they bounce off of each other</a>
15
15
<a href="4">4. many boucning circles with random colors, radiuses and window resize support</a>
16
16
<a href="3">3. circle bouncing on canvas borders</a>
+1
-1
index.php
+1
-1
index.php
···
10
10
</head>
11
11
12
12
<body>
13
-
<a href="7">7. Fancy loading animation</a>
13
+
<a href="7">7. Three fancy loading animations</a>
14
14
<a href="5">5. and now they bounce off of each other</a>
15
15
<a href="4">4. many boucning circles with random colors, radiuses and window resize support</a>
16
16
<a href="3">3. circle bouncing on canvas borders</a>