[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
8. Drawing
+153
+19
8/index.html
+19
8/index.html
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<meta charset="utf-8">
5
+
<meta name="theme-color" content="#db5945">
6
+
<title>Canvas</title>
7
+
<!--Roboto--> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
8
+
<!--Favicon: http:/#F986DF/realfavicongenerator.net -->
9
+
<link rel="stylesheet" type="text/css" href="../css/home.css?r=<?=rand(0,999)?>">
10
+
</head>
11
+
12
+
<body style="background-color:#272730">
13
+
<section class="main">
14
+
<canvas></canvas>
15
+
</section>
16
+
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
17
+
<script src="main.js"></script>
18
+
</body>
19
+
</html>
+19
8/index.php
+19
8/index.php
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<meta charset="utf-8">
5
+
<meta name="theme-color" content="#db5945">
6
+
<title>Canvas</title>
7
+
<!--Roboto--> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
8
+
<!--Favicon: http:/#F986DF/realfavicongenerator.net -->
9
+
<link rel="stylesheet" type="text/css" href="../css/home.css?r=<?=rand(0,999)?>">
10
+
</head>
11
+
12
+
<body style="background-color:#272730">
13
+
<section class="main">
14
+
<canvas></canvas>
15
+
</section>
16
+
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
17
+
<script src="main.js?r=<?=rand(0,999)?>"></script>
18
+
</body>
19
+
</html>
+114
8/main.js
+114
8/main.js
···
1
+
"use strict";
2
+
// init canvas
3
+
var canvas = document.querySelector("canvas");
4
+
var c = canvas.getContext("2d");
5
+
6
+
// update canvas size
7
+
var cw = window.innerWidth;
8
+
var ch = window.innerHeight;
9
+
canvas.width = cw;
10
+
canvas.height = ch;
11
+
12
+
var mousedown;
13
+
// var mx = window.event.clientX;
14
+
// var my = window.event.clientY;
15
+
// var oldmx = mx;
16
+
// var oldmy = my;
17
+
var mx, my, oldmx, oldmy;
18
+
window.addEventListener("mousedown", function() {
19
+
mousedown = true;
20
+
});
21
+
window.addEventListener("mouseup", function() {
22
+
mousedown = false;
23
+
});
24
+
window.addEventListener("mousemove", function(e) {
25
+
oldmx = mx;
26
+
oldmy = my;
27
+
mx = window.event.clientX;
28
+
my = window.event.clientY;
29
+
if (mousedown) {
30
+
draw();
31
+
}
32
+
});
33
+
34
+
function draw() {
35
+
c.beginPath();
36
+
c.lineWidth = 1;
37
+
c.strokeStyle = "#ffffff";
38
+
c.moveTo(oldmx, oldmy);
39
+
c.lineTo(mx, my);
40
+
c.stroke();
41
+
}
42
+
43
+
function old() {
44
+
window.addEventListener("resize", function() {
45
+
cw = window.innerWidth;
46
+
ch = window.innerHeight;
47
+
canvas.width = cw;
48
+
canvas.height = ch;
49
+
});
50
+
51
+
// c.arc(x, y, radius, startAngle, endAngle, [antiClockwise]);
52
+
function draw(x, y, radius, startAng, endAng, liiineWidth, color, clockWise, fill = false) {
53
+
c.beginPath();
54
+
c.lineWidth = liiineWidth;
55
+
c.strokeStyle = color;
56
+
c.fillStyle = color;
57
+
if (clockWise) {
58
+
c.arc(x, y, radius, Math.PI*2-endAng, Math.PI*2-startAng);
59
+
} else {
60
+
c.arc(x, y, radius, startAng, endAng);
61
+
}
62
+
if (fill) {
63
+
c.fill();
64
+
} else {
65
+
c.stroke();
66
+
}
67
+
}
68
+
69
+
var lineWidth = 0, increment = true;
70
+
setInterval(function() {
71
+
if (lineWidth > thatRadius) increment = false;
72
+
if (lineWidth == 0) increment = true;
73
+
if (increment) lineWidth++;
74
+
if (!increment) lineWidth--;
75
+
}, 52.25)
76
+
77
+
var start = 0, stop = 0, baseSpeed = 10, speedMultiplier = 2, thatRadius;
78
+
var shapes = [], slice = Math.PI/4, inverted = false, incr = 2, loop = baseSpeed*50; // incrementor
79
+
function animate() {
80
+
requestAnimationFrame(animate); // init animation
81
+
// c.clearRect(0, 0, innerWidth, innerHeight);
82
+
83
+
var startToUse = start;
84
+
var stopToUse = stop;
85
+
86
+
if (startToUse/loop == 6.28 && stopToUse/loop == 12.56) {
87
+
start = 0;
88
+
stop = 0;
89
+
inverted = true;
90
+
}
91
+
if (startToUse/loop == 12.56 && stopToUse/loop == 6.28) {
92
+
start = 0;
93
+
stop = 0;
94
+
inverted = false;
95
+
}
96
+
97
+
if (window.innerWidth < window.innerHeight) {
98
+
var radius = window.innerWidth/15;
99
+
thatRadius = window.innerWidth/15;
100
+
} else {
101
+
var radius = window.innerHeight/15;
102
+
thatRadius = window.innerHeight/15;
103
+
}
104
+
105
+
if (!inverted) {
106
+
start = start + baseSpeed;
107
+
stop = stop + baseSpeed * speedMultiplier;
108
+
} else {
109
+
start = start + baseSpeed * speedMultiplier;
110
+
stop = stop + baseSpeed;
111
+
}
112
+
}
113
+
animate();
114
+
}
+1
index.html
+1
index.html