-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtest.html
92 lines (75 loc) · 2.88 KB
/
test.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
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html>
<head>
<title>thorana test</title>
</head>
<body>
<!-- <canvas style="background: rgba(0,0,0,1);width: 100%;height: 100%" id="myCanvas">
Your browser not supported. please try with a different device.
</canvas>
-->
<div id="aWrapper">
<!--Include some fallback content on the 0.00001% chance your user's browser doesn't support canvas -->
<canvas id="myCanvas">Fallback content</canvas>
</div>
<script>
var aWrapper = document.getElementById("aWrapper");
var canvas = document.getElementById("myCanvas");
//Accesses the 2D rendering context for our canvasdfdf
var ctx = canvas.getContext("2d");
function setCanvasScalingFactor() {
return window.devicePixelRatio || 1;
}
function resizeCanvas() {
//Gets the devicePixelRatio
var pixelRatio = setCanvasScalingFactor();
//The viewport is in portrait mode, so var width should be based off viewport WIDTH
if (window.innerHeight > window.innerWidth) {
//Makes the canvas 100% of the viewport width
var width = Math.round(1.0 * window.innerWidth);
}
//The viewport is in landscape mode, so var width should be based off viewport HEIGHT
else {
//Makes the canvas 100% of the viewport height
var width = Math.round(1.0 * window.innerHeight);
}
//This is done in order to maintain the 1:1 aspect ratio, adjust as needed
var height = width;
//This will be used to downscale the canvas element when devicePixelRatio > 1
aWrapper.style.width = width + "px";
aWrapper.style.height = height + "px";
canvas.width = width * pixelRatio;
canvas.height = height * pixelRatio;
}
var cascadeFactor = 255;
var cascadeCoefficient = 1;
function draw() {
//The number of color block columns and rows
var columns = 5;
var rows = 5;
//The length of each square
var length = Math.round(canvas.width/columns) - 2;
//Increments or decrements cascadeFactor by 1, based on cascadeCoefficient
cascadeFactor += cascadeCoefficient;
//Makes sure the canvas is clean at the beginning of a frame
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = columns; i >= 1; i--) {
for (var j = rows; j >= 1; j--) {
//Where the color magic happens
ctx.fillStyle = "rgba(" + (j*i*(cascadeFactor-110)) + "," + (i*cascadeFactor) + "," + (j*cascadeFactor) + "," + 0.6 + ")";
ctx.fillRect((length*(i-1)) + ((i-1)*2), (length*(j-1)) + ((j-1)*2), length, length);
}
}
if (cascadeFactor > 255 || cascadeFactor < 0) {
//Resets the color cascade
cascadeCoefficient = -cascadeCoefficient;
}
//Continuously calls draw() again until cancelled
var aRequest = window.requestAnimationFrame(draw);
}
window.addEventListener("resize", resizeCanvas, false);
resizeCanvas();
draw();
</script>
</body>
</html>