[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
Removed touch which didn't work anyway
+24
-86
+1
8/index.html
+1
8/index.html
···
14
14
<canvas style="background-color:#303039"></canvas>
15
15
</section>
16
16
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
17
+
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> -->
17
18
<script src="main.js"></script>
18
19
</body>
19
20
</html>
+2
8/index.php
+2
8/index.php
···
7
7
<!--Roboto--> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
8
8
<!--Favicon: http:/#F986DF/realfavicongenerator.net -->
9
9
<link rel="stylesheet" type="text/css" href="../css/home.css?r=<?=rand(0,999)?>">
10
+
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
10
11
</head>
11
12
12
13
<body style="background-color:#272730">
···
14
15
<canvas style="background-color:#303039"></canvas>
15
16
</section>
16
17
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
18
+
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> -->
17
19
<script src="main.js?r=<?=rand(0,999)?>"></script>
18
20
</body>
19
21
</html>
+20
-85
8/main.js
+20
-85
8/main.js
···
5
5
6
6
var cw, ch;
7
7
function resize() {
8
-
var cw = window.innerWidth-50;
9
-
var ch = window.innerHeight-50;
8
+
cw = window.innerWidth-50;
9
+
ch = window.innerHeight-50;
10
10
// if cw is odd, make aspect ratio correct (2:1)
11
11
if (cw%2 == 1) cw--;
12
12
···
30
30
window.addEventListener("mousedown", function() {
31
31
mousedown = true;
32
32
startDraw();
33
-
c.arc(mx, my, 0.5, Math.PI*2, 0);
34
-
c.stroke();
35
33
});
36
34
window.addEventListener("mouseup", function() {
37
35
mousedown = false;
38
-
c.closePath();
39
36
});
40
-
41
-
window.addEventListener("mousemove", function(e) {
42
-
oldmx = mx;
43
-
oldmy = my;
37
+
window.addEventListener("click", function() {
44
38
leftMargin = (window.innerWidth - canvas.width)/2;
45
39
topMargin = (window.innerHeight - canvas.height)/2;
46
40
mx = window.event.clientX - leftMargin;
47
41
my = window.event.clientY - topMargin;
48
-
if (mousedown) draw();
42
+
c.moveTo(mx, my);
43
+
c.arc(mx, my, 0.5, Math.PI*2, 0);
44
+
c.stroke();
45
+
});
46
+
47
+
window.addEventListener("mousemove", function(e) {
48
+
if (mousedown) {
49
+
oldmx = mx;
50
+
oldmy = my;
51
+
leftMargin = (window.innerWidth - canvas.width)/2;
52
+
topMargin = (window.innerHeight - canvas.height)/2;
53
+
mx = window.event.clientX - leftMargin;
54
+
my = window.event.clientY - topMargin;
55
+
// if mousedown and inside canvas
56
+
draw();
57
+
}
49
58
});
50
59
51
60
function startDraw() {
61
+
c.beginPath();
52
62
c.lineWidth = 1;
53
63
c.strokeStyle = "#ffffff";
54
-
c.beginPath();
55
-
c.moveTo(mx, my);
56
64
}
57
65
58
66
function draw() {
59
67
c.lineTo(mx, my);
60
68
c.stroke();
61
69
}
62
-
63
-
function old() {
64
-
window.addEventListener("resize", function() {
65
-
cw = window.innerWidth;
66
-
ch = window.innerHeight;
67
-
canvas.width = cw;
68
-
canvas.height = ch;
69
-
});
70
-
71
-
// c.arc(x, y, radius, startAngle, endAngle, [antiClockwise]);
72
-
function draw(x, y, radius, startAng, endAng, liiineWidth, color, clockWise, fill = false) {
73
-
c.beginPath();
74
-
c.lineWidth = liiineWidth;
75
-
c.strokeStyle = color;
76
-
c.fillStyle = color;
77
-
if (clockWise) {
78
-
c.arc(x, y, radius, Math.PI*2-endAng, Math.PI*2-startAng);
79
-
} else {
80
-
c.arc(x, y, radius, startAng, endAng);
81
-
}
82
-
if (fill) {
83
-
c.fill();
84
-
} else {
85
-
c.stroke();
86
-
}
87
-
}
88
-
89
-
var lineWidth = 0, increment = true;
90
-
setInterval(function() {
91
-
if (lineWidth > thatRadius) increment = false;
92
-
if (lineWidth == 0) increment = true;
93
-
if (increment) lineWidth++;
94
-
if (!increment) lineWidth--;
95
-
}, 52.25)
96
-
97
-
var start = 0, stop = 0, baseSpeed = 10, speedMultiplier = 2, thatRadius;
98
-
var shapes = [], slice = Math.PI/4, inverted = false, incr = 2, loop = baseSpeed*50; // incrementor
99
-
function animate() {
100
-
requestAnimationFrame(animate); // init animation
101
-
// c.clearRect(0, 0, innerWidth, innerHeight);
102
-
103
-
var startToUse = start;
104
-
var stopToUse = stop;
105
-
106
-
if (startToUse/loop == 6.28 && stopToUse/loop == 12.56) {
107
-
start = 0;
108
-
stop = 0;
109
-
inverted = true;
110
-
}
111
-
if (startToUse/loop == 12.56 && stopToUse/loop == 6.28) {
112
-
start = 0;
113
-
stop = 0;
114
-
inverted = false;
115
-
}
116
-
117
-
if (window.innerWidth < window.innerHeight) {
118
-
var radius = window.innerWidth/15;
119
-
thatRadius = window.innerWidth/15;
120
-
} else {
121
-
var radius = window.innerHeight/15;
122
-
thatRadius = window.innerHeight/15;
123
-
}
124
-
125
-
if (!inverted) {
126
-
start = start + baseSpeed;
127
-
stop = stop + baseSpeed * speedMultiplier;
128
-
} else {
129
-
start = start + baseSpeed * speedMultiplier;
130
-
stop = stop + baseSpeed;
131
-
}
132
-
}
133
-
animate();
134
-
}
+1
-1
index.html
+1
-1
index.html
···
10
10
</head>
11
11
12
12
<body>
13
-
<a href="8">8. Drawing</a>
13
+
<a href="8">8. Drawing board</a>
14
14
<a href="7">7. Three fancy loading animations</a>
15
15
<a href="5">5. and now they bounce off of each other</a>
16
16
<a href="4">4. many boucning circles with random colors, radiuses and window resize support</a>