编程随想

会python真的可以为所欲为 by Python自学0(回) 365天前

这里还有人吗 by mikeKil1(回) 550天前

这里还有人吗 by mikeKil0(回) 550天前

每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。 by js特效0(回) 775天前

到处都是羊，不想上班 by Python自学0(回) 855天前

鸽子 by 张书娥0(回) 859天前

云代码 - javascript代码库

js下雪效果

2013-01-31 作者：小蜜锋举报

[javascript]代码库

js下雪效果.rar(免费下载)[49 次下载]

<!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>

[代码运行效果截图]

[源代码打包下载]

js下雪效果.rar(免费下载)[49 次下载]

网友评论 (发表评论)

初级程序员
by: 云代码会员发表于：2014-12-31 19:30:10 顶(0) | 踩(0) 回复
好好学习一下啊啊
回复评论

还能输入：1000字
初级程序员
by: star 发表于：2016-03-02 14:18:04 顶(0) | 踩(0) 回复
好东西
网友回复
- ：是啊
  顶(0) 踩(0) 2018-06-01 17:27:47
回复
回复评论

还能输入：1000字
初级程序员
by: 待我称帝封你为后发表于：2016-05-24 16:31:09 顶(0) | 踩(0) 回复
50积分怎么狠
回复评论

还能输入：1000字
by: 发表于：2018-06-01 17:27:09 顶(0) | 踩(0) 回复
积分不够啊
回复评论

还能输入：1000字