-
Notifications
You must be signed in to change notification settings - Fork 0
/
LAB2Marciniak.html
81 lines (64 loc) · 2.4 KB
/
LAB2Marciniak.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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<!--Zadanie 2-->
<script>
var mw = w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var mh = h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var stop1 = 0
var stop2 = 1 / 5
var stop3 = 2 / 5
var stop4 = 3 / 5
var stop5 = 4 / 5
var stop6 = 1
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
canvas.setAttribute('width', mw);
canvas.setAttribute('height', mh);
canvasApp();
function canvasApp() {
function drawThings() {
context.fillStyle = "#0000FF";
context.arc(95, 50, 40, 0, 2 * Math.PI);
context.stroke();
var xPosition = (canvas.width / 2);
var yPosition = (canvas.height / 2);
var gradient = context.createLinearGradient(0, 0, mw, 0);
for (var i = 0; i < colorStops.length; i++) {
var tempColorStop = colorStops[i];
var tempColor = tempColorStop.color;
var tempStopPercent = tempColorStop.stopPercent;
gradient.addColorStop(tempStopPercent, tempColor);
tempStopPercent += .015;
if (tempStopPercent > 1) {
tempStopPercent = 0;
}
tempColorStop.stopPercent = tempStopPercent;;
colorStops[i] = tempColorStop;
}
context.fillStyle = gradient;
context.fill();
}
function gradientLoop() {
window.setTimeout(gradientLoop, 1000);
drawThings()
}
var colorStops = new Array(
{ color: "#0000FF", stopPercent: stop1 },
{ color: "#00b24e", stopPercent: stop2 },
{ color: "#00926d", stopPercent: stop3 },
{ color: "#007c83", stopPercent: stop4 },
{ color: "#006a95", stopPercent: stop5 },
{ color: "#00FF00", stopPercent: stop6 });
gradientLoop();
}
</script>
</body>
</head>
</html>