[javascript]代码库
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>雪花</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
body, html {
width:100%;
height:100%;
overflow:hidden;
}
</style>
</head>
<body>
<canvas id="mycanvas"></canvas>
<script>
var myCanvas = document.getElementById('mycanvas');
var cxt = myCanvas.getContext('2d');
var snowcount = 30; /// 显示数量
var index = 0;
imageList = {}; /// 图片列表
imageSource = ['bg.jpg', 'snow3.png']; /// 图片源文件类表
var snowlist = [];
/// 初始化
function init() {
/// 画布
myCanvas.width = document.body.offsetWidth;
myCanvas.height = document.body.offsetHeight;
// 加载图片
loadImages();
}
/// 加载图片
function loadImages() {
for (var i in imageSource) {
imageList[i] = new Image();
imageList[i].src = imageSource[i];
imageList[i].onload = function () {
index++;
if (imageSource.length >= index++) {
callImages();
}
}
}
}
function callImages() {
for (var i = 0; i < snowcount; i++) {
snowlist.push(new snow());
}
setInterval(function () {
cxt.clearRect(0, 0, myCanvas.width, myCanvas.height);
fillBackground();
for (var i in snowlist) {
snowlist[i].Go();
if (snowlist[i].Y >= myCanvas.height) {
snowlist[i] = new snow();
}
}
}, 1);
}
function fillBackground() {
cxt.drawImage(imageList[0], 0, 0, imageList[0].width, imageList[0].height, 0,0, myCanvas.width, myCanvas.height);
}
/// 雪
function snow()
{
this.X = parseInt(Math.random() * myCanvas.width);
this.Y = 0;
this.Size = parseInt(Math.random() * 71);
this.Transparency = 10;
this.Speed = parseInt(Math.random()*(1-10+1)+10);
}
/// 动起来
snow.prototype.Go = function () {
this.Y = this.Y + this.Speed;
cxt.drawImage(imageList[1], 0, 0, imageList[1].width, imageList[1].height, this.X, this.Y , imageList[1].width - this.Size , imageList[1].height - this.Size);
}
init();
</script>
</body>
</html>
[代码运行效果截图]
[源代码打包下载]
会python真的可以为所欲为0(回)
20天前
这里还有人吗1(回)
206天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
430天前
鸽子
0(回)
514天前
js下雪效果.rar(免费下载)[48 次下载]
初级程序员
by: 云代码会员 发表于：2014-12-31 19:30:10 顶(0) | 踩(0) 回复
好好学习一下啊啊
回复评论