-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
105 lines (100 loc) · 2.83 KB
/
index.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
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>V-cascade docs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/vs.min.css">
</head>
<style>
#Evan {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.hljs {
border: 1px solid #eee;
width: 350px;
margin: 0 auto;
box-sizing: border-box;
border-radius: 5px;
text-align: left;
max-width: 90%;
font-size: 13px;
}
</style>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<canvas id="Evan"></canvas>
</body>
<script>
// 彩带
// 初始化变量
let c = document.getElementsByTagName('canvas')[0],
x = c.getContext('2d'),
pr = window.devicePixelRatio || 1, // 设置像素比
w = window.innerWidth,
h = window.innerHeight,
f = 90,
q,
m = Math,
r = 0,
u = m.PI * 2, // Math.PI*2
v = m.cos, // 余弦值
z = m.random // 随机数值
c.width = w * pr // 设置 Canvas 宽度为可视窗口的宽度*像素比
c.height = h * pr // 设置 Canvas 高度为可视窗口的高度*像素比
x.scale(pr, pr) // 缩放 Canvas pr = 1 = 100%
x.globalAlpha = 0.6 // 设置 Canvas 透明度
// 循环函数
function i () {
x.clearRect(0, 0, w, h) // 清空矩形
// 数组变量对象
q = [{
x: 0,
y: h * 0.7 + f
}, {
x: 0,
y: h * 0.7 - f
}]
// 循环，0 < 可视窗口宽度+90
while (q[1].x < w + f) {
d(q[0], q[1]) // 绘制函数传参
}
}
// 绘制函数传参，i 和 j 均有一个 x 与 y 数值对象
function d (i, j) {
x.beginPath() // 开始路径
x.moveTo(i.x, i.y) // 移动路径
x.lineTo(j.x, j.y) // 创建线条
var k = j.x + (z() * 2 - 0.25) * f, // 重新定义数组对象 q[1] 的变量对象，z() 随机数值
n = y(j.y) // 将 y() 传参函数赋值给 n
x.lineTo(k, n) // 创建线条
x.closePath() // 关闭路径
r -= u / -50
// 填充颜色，toString(16)转换为16进制颜色值
// 关于（<< 与 |）位运算操作参考：http://www.w3school.com.cn/js/pro_js_operators_bitwise.asp
x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(
16)
x.fill()
// 重新定义数组对象，增加无限可变性
q[0] = q[1]
q[1] = {
x: k,
y: n
}
}
// 传参函数 return 返回数值
function y (p) {
var t = p + (z() * 2 - 1.1) * f // z() 随机数值
return (t > h || t < 0) ? y(p) : t // 判断后返回不同数值后增加了更多的可变性
}
// 点击与触摸时执行 i() 函数
document.onclick = i
i()
</script>
</html>