这个页面将会展示雪花动态背景的效果,只需要在页面中增加以下的代码即可:

点击切换显示模式查看不同的效果
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
var snow = {
info : {
top : 0,
left : 0,
zIndex : 500,
number : 70
},
down : function(){
//获取页面的大小
var win_Width = window.innerWidth;
var win_Height = window.innerHeight;
//创建场景
var oCanvas = document.createElement('canvas');
oCanvas.style.position = 'fixed';
oCanvas.style.pointerEvents = 'none';
oCanvas.style.top = snow.info.top + 'px';
oCanvas.style.left = snow.info.left + 'px';
oCanvas.style.zIndex = snow.info.zIndex;
oCanvas.width = win_Width;
oCanvas.height = win_Height;
document.body.appendChild(oCanvas);
//创建雪
var arrSnow = [];
for(var i = 0; i < snow.info.number; i++){
arrSnow.push({
x : Math.random() * win_Width,//雪的横坐标
y : Math.random() * win_Height,//雪的纵坐标
r : Math.random() * 4 + 1,//雪的半径
n : Math.random() * 70
});
}
var gd = oCanvas.getContext('2d');//用来绘制元素
var speed = 0;
//处理动画效果
setInterval(function(){
gd.clearRect(0, 0, win_Width, win_Height);
gd.fillStyle = 'rgba(255, 255, 255, 0.6)';
gd.shadowBlur = 5;
gd.shadowColor = 'rgba(255, 255, 255, 0.9)';
gd.beginPath();
//绘制雪
for(var i = 0; i < 70; i++){
var _snowObj = arrSnow[i];
gd.moveTo(_snowObj.x, _snowObj.y);
gd.arc(_snowObj.x, _snowObj.y, _snowObj.r, 0, Math.PI * 2, 0);
}
gd.fill();
speed += 0.01;
//处理雪下落
for(var i = 0; i < 70; i++){
var _snowObj = arrSnow[i];
_snowObj.y += Math.cos(speed + _snowObj.n) + _snowObj.r / 2;
_snowObj.x += Math.sin(speed) * 2;
if(_snowObj.x > win_Width + 5 || _snowObj.x < -5 || _snowObj.y > win_Height){
arrSnow[i] = i % 3 > 0 ? {x : Math.random() * win_Width, y : -10, r : _snowObj.r, n : _snowObj.n} : Math.sin(speed) > 0 ? {x : -5, y : Math.random() * win_Height, r : _snowObj.r, n : _snowObj.n} : {x : win_Width + 5, y : Math.random() * win_Height, r : _snowObj.r, n : _snowObj.n};
}
}
},15);
}
};
点击切换显示模式查看不同的效果

源代码访问地址:https://github.com/coolfishstudio/cfs.snow.js


评论
avatar
竹山一叶
技术分享 个人心得
Follow Me
公告
欢迎光临小站,这里是我日常收集和整理的总结,希望能对你有所帮助:)

本站的内容经过个人加工总结而来,也参考了网友们分享的资料,如有侵权,请第一时间联系我,我将及时进行修改和删除😊
最新文章
网站资讯
文章数目 :
99
已运行时间 :
本站总字数 :
64.7k
本站访客数 :
本站总访问量 :
最后更新时间 :
文章归档文章分类文章标签
随便逛逛