-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcanvas特效-花卉.html
180 lines (146 loc) · 5.19 KB
/
canvas特效-花卉.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<meta name="author" content="练习 加油">
<style>
body{font-family: "Microsoft YaHei",serif;}
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
ol,ul,li{margin:0;padding:0;list-style:none;}
img{border:none;}
body{
margin: 0;
background-color: #000;
overflow: hidden;
}
canvas{
display: block;
}
</style>
</head>
<body>
<div id="wrap"></div>
<canvas width="" height=""></canvas>
<script>
let oC,
cxt,
cx,
cy,
branches, //数枝
stratHue;
//min=<n <= max 的随机小数
function randS(min,max) {
return Math.random()*(max-min)+min
}
//min=<n <= max 的随机整数数
function randInt(min,max) {
return Math.floor(Math.random()*(max - min+1)+min)
}
//定义花卉 构造函数
function Branch(hue,x,y,angle,v) {
let dis = 15;
this.x = x + randS(-dis,dis);
this.y = y + randS(-dis,dis);
this.points = []; //点的坐标
this.angle = angle != undefined?angle:randS(0,Math.PI);
this.v = v!= undefined?v:randS(-4,4);
this.spread = 0;//散开范围
this.hue = hue!=undefined?hue:200;//色调
this.life = 1 ;//移动花卉衰减系数
this.decay = 0.0015 ;//衰减系数
this.dead = false; //判断是否静止
this.points.push({
x:this.x,
y:this.y
})
}
//扩散过程
Branch.prototype.step = function (i) {
this.life -= this.decay ;//衰减
if( this.life <=0 ){
//静止
this.dead = true;
};
if( !this.dead ){
//改变坐标
let lastPoint = this.points[this.points.length-1];
this.points.push({
x:lastPoint.x + Math.cos(this.angle)*this.v,
y:lastPoint.y + Math.sin(this.angle)*this.v,
});
this.angle += randS(-this.spread,this.spread);
this.v *= 0.99;
this.spread = this.v*0.04 ;//影响范围
this.hue += 0.3;
}else{
//静止
branches.splice(i,1); //删除
}
}
//canvas绘制
Branch.prototype.draw = function () {
//没有长度 或 静止
if( !this.points.length||this.dead ){
return false
}
let length = this.points.length,
i = length-1,
point = this.points[i],
lastPonint = this.points[i-randInt(5,100)];
console.log(length);
if( lastPonint ){
let jitter = 2+this.life*6;
cxt.beginPath()
cxt.moveTo(lastPonint.x,lastPonint.y)
cxt.lineTo(point.x+randS(-jitter,jitter),point.y+randS(-jitter,jitter));
let alpha = this.life*0.075;
cxt.strokeStyle = `hsla(${this.hue+randS(-10,10)},70%,40%,${alpha})`;
cxt.stroke()
}
}
//初始化
function init() {
oC = document.querySelector('canvas'),
cxt = oC.getContext('2d'),
branches = [], //数枝
stratHue = 220;
reset();
loop();
}
function loop() {
step();
draw();
requestAnimationFrame(loop);
}
function step() {
let i = branches.length;
while (i--)branches[i].step(i) //定义step怎么变化
}
function draw() {
let i = branches.length;
while (i--)branches[i].draw()
}
function reset() {
let w = window.innerWidth,
h = window.innerHeight;
oC.width = w;
oC.height = h;
cx = w/2;
cy = h/2;
branches.length = 0;//重置 数组清空
for (let i = 0; i < 1000; i++) {
branches.push(new Branch(stratHue,cx,cy))
}
}
window.addEventListener('resize',reset)
window.addEventListener('click',function () {
stratHue += 60;
reset()
})
init();
</script>
</body>
</html>