# 1.写好对应的vue组件
在这我就那我写的樱花组件作为例子
<template>
<div class="Sakura">
<canvas id="canvas_sakura" ref="canvas_sakura" :style="{zIndex: zIndex}"></canvas>
</div>
</template>
<script>
class Sakura {
constructor (x, y, s, r, fn, that) {
this.x = x;
this.y = y;
this.s = s;
this.r = r;
this.fn = fn;
this.that = that
}
draw (cxt) {
const img = new Image();
if (!SAKURA_IMG.replace) {
img.src = require('./sakura.png'); //樱花效果图相对路径
} else {
img.src = SAKURA_IMG.httpUrl; //樱花效果图路径
}
cxt.save();
var xc = 40 * this.s / 4;
cxt.translate(this.x, this.y);
cxt.rotate(this.r);
cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
cxt.restore();
}
update () {
this.x = this.fn.x(this.x, this.y);
this.y = this.fn.y(this.y, this.y);
this.r = this.fn.r(this.r);
if(this.x > window.innerWidth ||
this.x < 0 ||
this.y > window.innerHeight ||
this.y < 0
) {
this.r = this.that.getRandom('fnr');
if(Math.random() > 0.4) {
this.x = this.that.getRandom('x');
this.y = 0;
this.s = this.that.getRandom('s');
this.r = this.that.getRandom('r');
} else {
this.x = window.innerWidth;
this.y = this.that.getRandom('y');
this.s = this.that.getRandom('s');
this.r = this.that.getRandom('r');
}
}
}
}
class SakuraList {
constructor () {
this.list = []
}
push (sakura) {
this.list.push(sakura);
}
update () {
for(var i = 0, len = this.list.length; i < len; i++) {
this.list[i].update();
}
}
draw (cxt) {
for(var i = 0, len = this.list.length; i < len; i++) {
this.list[i].draw(cxt);
}
}
get (i) {
return this.list[i];
}
size () {
return this.list.length;
}
}
export default {
name: 'Sakura',
data () {
return {
staticx: false,
stop: null,
num: SAKURA_NUM,
show: SAKURA_SHOW,
zIndex: SAKURA_ZINDEX
}
},
mounted () {
this.$nextTick(() => {
if (this.show) {
this.startSakura()
}
})
},
methods: {
getRandom(option) {
var ret, random;
switch(option) {
case 'x':
ret = Math.random() * window.innerWidth;
break;
case 'y':
ret = Math.random() * window.innerHeight;
break;
case 's':
ret = Math.random();
break;
case 'r':
ret = Math.random() * 6;
break;
case 'fnx':
random = -0.5 + Math.random() * 1;
ret = function(x, y) {
return x + 0.5 * random - 1.7;
};
break;
case 'fny':
random = 1.5 + Math.random() * 0.7
ret = function(x, y) {
return y + random;
};
break;
case 'fnr':
random = Math.random() * 0.03;
ret = function(r) {
return r + random;
};
break;
}
return ret;
},
startSakura() {
let that = this
requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
var canvas = document.getElementById('canvas_sakura');
this.staticx = true;
this.$refs.canvas_sakura.width = window.innerWidth;
this.$refs.canvas_sakura.height = window.innerHeight;
var cxt = this.$refs.canvas_sakura.getContext('2d');
var sakuraList = new SakuraList();
for(var i = 0; i < that.num; i++) {
let sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny, randomFnR;
randomX = this.getRandom('x');
randomY = this.getRandom('y');
randomR = this.getRandom('r');
randomS = this.getRandom('s');
randomFnx = this.getRandom('fnx');
randomFny = this.getRandom('fny');
randomFnR = this.getRandom('fnr');
sakura = new Sakura(randomX, randomY, randomS, randomR, {
x: randomFnx,
y: randomFny,
r: randomFnR
}, this);
sakura.draw(cxt);
sakuraList.push(sakura);
}
this.stop = requestAnimationFrame(function fn() {
cxt.clearRect(0, 0, canvas.width, canvas.height);
sakuraList.update();
sakuraList.draw(cxt);
that.stop = requestAnimationFrame(fn);
})
},
stopp() {
if(this.staticx) {
var child = document.getElementById("canvas_sakura");
child.parentNode.removeChild(child);
window.cancelAnimationFrame(this.stop);
this.staticx = false;
} else {
this.startSakura();
}
}
}
}
</script>
<style scoped>
#canvas_sakura{
pointer-events: none;
position: fixed;
top:0;
left:0;
}
</style>
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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
# 2.咱们封装好组件后需要导出一下
创建一个echanceApp.js咱们把组件导入进去
import Sakura from "./Sakura.vue";
export default ({
Vue
}) => {
Vue.component(Sakura.name, Sakura);
};
1
2
3
4
5
6
7
2
3
4
5
6
7
# 3.根据vuepress导出语法
创建index.js
const { resolve } = require('path')
module.exports = (options = {}, context) => ({
define() {
const {
num = 10,
show = true, // true显示 false隐藏
zIndex = -1,
img = {
replace: false, // absolute 图片绝对路径 relative 相对路径,
httpUrl: '...'
}
} = options
return {
SAKURA_NUM: num,
SAKURA_IMG: img,
SAKURA_SHOW: show,
SAKURA_ZINDEX: zIndex
}
},
enhanceAppFiles: resolve(__dirname, "./bin/enhanceAppFile.js"),
globalUIComponents: ["Sakura"]
});
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
到这里就结束了 是不是很简单 😁