Javascript实现的飘雪效果
2015-02-27 11:05
197 查看
<html>
<head>
<canvas id="christmasCanvas" style="top: 0px; left: 0px; z-index: 5000; position: fixed; pointer-events: none;" ></canvas>
<script>
var snow = function() {
var b = document.getElementById("christmasCanvas"), a = b.getContext("2d"), d = window.innerWidth, c = window.innerHeight;
b.width = d;
b.height = c;
for(var e = [], b = 0;b < 70;b++) {
e.push({x:Math.random() * d, y:Math.random() * c, r:Math.random() * 4 + 1, d:Math.random() * 70})
}
var h = 0;
window.intervral4Christmas = setInterval(function() {
a.clearRect(0, 0, d, c);
a.fillStyle = "rgba(255, 255, 0, 0.6)";
a.shadowBlur = 5;
a.shadowColor = "rgba(255, 255, 255, 0.9)";
a.beginPath();
for(var b = 0;b < 70;b++) {
var f = e[b];
a.moveTo(f.x, f.y);
a.arc(f.x, f.y, f.r, 0, Math.PI * 2, !0)
}
a.fill();
h += 0.01;
for(b = 0;b < 70;b++) {
if(f = e[b], f.y += Math.cos(h + f.d) + 1 + f.r / 2, f.x += Math.sin(h) * 2, f.x > d + 5 || f.x < -5 || f.y > c) {
e[b] = b % 3 > 0 ? {x:Math.random() * d, y:-10, r:f.r, d:f.d} : Math.sin(h) > 0 ? {x:-5, y:Math.random() * c, r:f.r, d:f.d} : {x:d + 5, y:Math.random() * c, r:f.r, d:f.d}
}
}
}, 70)
}
snow();
</script>
</head>
<body></body>
</html>
<head>
<canvas id="christmasCanvas" style="top: 0px; left: 0px; z-index: 5000; position: fixed; pointer-events: none;" ></canvas>
<script>
var snow = function() {
var b = document.getElementById("christmasCanvas"), a = b.getContext("2d"), d = window.innerWidth, c = window.innerHeight;
b.width = d;
b.height = c;
for(var e = [], b = 0;b < 70;b++) {
e.push({x:Math.random() * d, y:Math.random() * c, r:Math.random() * 4 + 1, d:Math.random() * 70})
}
var h = 0;
window.intervral4Christmas = setInterval(function() {
a.clearRect(0, 0, d, c);
a.fillStyle = "rgba(255, 255, 0, 0.6)";
a.shadowBlur = 5;
a.shadowColor = "rgba(255, 255, 255, 0.9)";
a.beginPath();
for(var b = 0;b < 70;b++) {
var f = e[b];
a.moveTo(f.x, f.y);
a.arc(f.x, f.y, f.r, 0, Math.PI * 2, !0)
}
a.fill();
h += 0.01;
for(b = 0;b < 70;b++) {
if(f = e[b], f.y += Math.cos(h + f.d) + 1 + f.r / 2, f.x += Math.sin(h) * 2, f.x > d + 5 || f.x < -5 || f.y > c) {
e[b] = b % 3 > 0 ? {x:Math.random() * d, y:-10, r:f.r, d:f.d} : Math.sin(h) > 0 ? {x:-5, y:Math.random() * c, r:f.r, d:f.d} : {x:d + 5, y:Math.random() * c, r:f.r, d:f.d}
}
}
}, 70)
}
snow();
</script>
</head>
<body></body>
</html>
相关文章推荐
- JavaScript实现下雪(Snow)效果
- 用webserver和javascript实现无刷新效果
- javascript实现的又一个不错的滑动导航效果
- 用javascript实现的仿Flash广告图片轮换效果
- javascript实现的又一个不错的滑动导航效果
- 『改进』逐行滚动文字效果的Javascript实现
- 类似 MSDN CSDN 导航树效果 ASP.Net(C#) + JavaScript 实现!
- Javascript实现点击表格行的效果
- 利用javascript从数据库取数据来实现CSDN首页图片的切换效果(新增下载地址)
- 用DIV 来代替JAVASCRIPT以实现无间隔新闻滚动的效果
- [JS代码]用JavaScript实现网页轮换广告效果
- 用JavaScript实现页面百叶窗效果
- Javascript实现loading的效果
- 用JavaScript实现仿Windows关机效果
- 导航树效果,JSP + JavaScript 实现!
- 用javascript实现(页面正在加载的效果)
- 用javascript实现(页面正在加载的效果)
- JSP + JavaScript 实现类似 MSDN CSDN 导航树效果!
- javascript实现的listview效果
- 用JavaScript实现仿Windows关机效果