小球喷泉 - JavaScript论坛

| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛 |

编程论坛 → WEB开发 → 『 JavaScript论坛』 → 小球喷泉

我的收件箱(0)

欢迎加入我们，一同切磋技术

共有 5953 人关注过本帖

标题：小球喷泉

只看楼主加入收藏

leeqihero

等　级：论坛游侠
威　望：7
帖　子：122
专家分：135
注　册：2016-3-24
结帖率：20%

楼主

问题点数：0 回复次数：10

小球喷泉

搜索更多相关主题的帖子: 喷泉　

2016-05-12 19:36

leeqihero

等　级：论坛游侠
威　望：7
帖　子：122
专家分：135
注　册：2016-3-24

第 2 楼

得分:0

程序代码：

<html>
<head>
<meta charset="utf-8"/>
<style>
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
background: #FFF5F5;
}
canvas {
display: block;
margin: 0px auto;
}
</style>
</head>
<body>
<canvas id="画布"></canvas>
</body>
<script>
window.onload = app();
var 画布;
function app() {
var 绘图环境;
var 小球集合 = [];
var 初始化 = function() {
画布 = document.getElementById("画布");
画布.width = document.body.scrollWidth;
画布.height = (document.documentElement.scrollHeight > document.body.scrollHeight ? 
document.documentElement.scrollHeight : document.body.scrollHeight);
绘图环境 = 画布.getContext("2d");
开始();
};
var 开始 = function() {
var x = -10, i = 1;
var timer = setInterval(function(){
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
画(小球集合);
选(小球集合);
更新(小球集合);
}, 30);
};
var 选 = function(列表) {
for (var i = 列表.length - 1; i >= 0; i--) {
if (列表[i].y > 画布.height - 10) {
列表[i].y = 画布.height - 10;
列表[i].vx = 列表[i].vy = 列表[i].ay = 0;
}
if (列表[i].colorA <= 0) {
小球集合.splice(i,1);
}
}

}
var 画 = function(列表) {
绘图环境.clearRect(0, 0, 画布.width, 画布.height);
for (var i = 列表.length - 1; i >= 0; i--) {
绘图环境.fillStyle = 列表[i].color;
绘图环境.beginPath();
绘图环境.arc(列表[i].x, 列表[i].y, 列表[i].r, 0,Math.PI*2,true);
绘图环境.closePath();
绘图环境.fill();
}
};
var 更新 = function(列表) {
var 小球;
for (var i = 列表.length - 1; i >= 0; i--) {
小球 = 列表[i];
小球.x += 小球.vx;
小球.y += 小球.vy;
小球.vy += 小球.ay;
小球.colorA -= 0.006;
小球.color = 小球.colorRgb + 小球.colorA + ")";
}
};
return 初始化
}

var 小球 = function() {
this.r = 3;
this.colorRgb = "rgba(" + (255 - Math.floor(Math.random() * 200)) + "," + (255 - Math.floor(Math.random() * 200)) + "," + (255 - Math.floor(Math.random() * 200)) + ",";
this.colorA = 1;
this.color = this.colorRgb + this.colorA + ")";
this.x = 画布.width / 2;
this.y = 画布.height - 10;
this.vx = (Math.random() > 0.5 ? 1 : -1) * Math.random() * 6;
this.vy = -21;
this.ay = 0.55;
};
</script>
</html>

2016-05-12 19:36

龙神

等　级：论坛游侠
威　望：1
帖　子：35
专家分：130
注　册：2016-6-16

第 3 楼

得分:0

会玩

2016-06-16 15:39

龙神

等　级：论坛游侠
威　望：1
帖　子：35
专家分：130
注　册：2016-6-16

第 4 楼

得分:0

我把这段代码改进了，现在可以在不影响画面的情况下改变帧数（刷新间隔）

程序代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
            background: #000;
        }
    </style>
</head>
<body>
<canvas id="画布"></canvas>
<script>
    var 画布, 绘图环境, 小球集合 = [], 地面, 刷新时间 = 16.67;
    window.onload = function () {
        画布 = document.getElementById("画布");
        画布.width = document.body.scrollWidth;
        画布.height = (document.documentElement.scrollHeight > document.body.scrollHeight ? document.documentElement.scrollHeight : document.body.scrollHeight);
        地面 = 画布.height - 10;
        绘图环境 = 画布.getContext("2d");
        var now = Date.now(), then, t;
        setInterval(重绘, 刷新时间);
        function 重绘() {
            then = now;
            now = Date.now();
            t = now - then;
            var 新小球数量 = Math.floor(t / 4);
            for (var i = 0; i < 新小球数量; i++)
                小球集合.push(new 小球());
            绘图环境.clearRect(0, 0, 画布.width, 画布.height);
            画(小球集合);
        }

        function 画(列表) {
            for (var i = 列表.length - 1; i >= 0; i--) {
                var 当前球 = 列表[i];
                绘图环境.fillStyle = 当前球.color;
                绘图环境.beginPath();
                绘图环境.arc(当前球.x, 当前球.y, 当前球.r, 0, Math.PI * 2);
                绘图环境.closePath();
                绘图环境.fill();
                if (当前球.y > 地面) {
                    当前球.y = 地面;
                    当前球.vx = 当前球.vy = 当前球.ay = 0;
                }
                if (当前球.colorA <= 0) {
                    小球集合.splice(i, 1);
                }
                当前球 = 列表[i];
                当前球.x += 当前球.vx * t;
                当前球.y += 当前球.vy * t;
                当前球.vy += 当前球.ay * t;
                当前球.colorA -= 当前球.hideSpeed * t;
                当前球.color = 当前球.colorRgb + 当前球.colorA + ")";
            }
        }
    };
    function 小球() {
        this.colorRgb = "rgba(" + (255 - Math.floor(Math.random() * 200)) + "," + (255 - Math.floor(Math.random() * 200)) + "," + (255 - Math.floor(Math.random() * 200)) + ",";
        this.colorA = 1;
        this.color = this.colorRgb + this.colorA + ")";
        this.x = 画布.width / 2;
        this.y = 地面;
        this.vx = (Math.random() - 0.5) * 0.2;
        this.vy = -0.4;
    }
    小球.prototype.r = 5;
    小球.prototype.ay = 0.0002;
    小球.prototype.hideSpeed = 0.0002;
</script>
</body>
</html>

2016-06-16 17:45

leeqihero

等　级：论坛游侠
威　望：7
帖　子：122
专家分：135
注　册：2016-3-24

第 5 楼

得分:0

这个代码更简洁

2016-06-16 18:03

龙神

等　级：论坛游侠
威　望：1
帖　子：35
专家分：130
注　册：2016-6-16

第 6 楼

得分:0

再次改进，小球密度可以设为小数

程序代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            background-color: #000;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
<canvas id="画布"></canvas>
<script>
    window.onload = function () {
        var 画布, 绘图环境, 小球集合 = [], 地面, 刷新时间 = 16.67, 小球每毫秒数量 = 0.05;
        画布 = document.getElementById("画布");
        画布.width = document.body.clientWidth;
        画布.height = (document.documentElement.scrollHeight > document.body.clientHeight ? document.documentElement.scrollHeight : document.body.scrollHeight);
        地面 = 画布.height - 10;
        绘图环境 = 画布.getContext("2d");
        var now = Date.now(), then, t;
        setInterval(重绘, 刷新时间);
        function 重绘() {
            then = now;
            now = Date.now();
            t = now - then;
            var e = t*小球每毫秒数量; //小球期望密度值
            var 新小球数量 = Math.floor(e) + ((Math.random()<(e - Math.floor(e)))?1:0);
            for (var i = 0; i < 新小球数量; i++)
                小球集合.push(new 小球());
            绘图环境.clearRect(0, 0, 画布.width, 画布.height);
            画(小球集合);
        }
        function 画(列表) {
            for (var i = 列表.length - 1; i >= 0; i--) {
                var 当前球 = 列表[i];
                绘图环境.fillStyle = 当前球.color;
                绘图环境.beginPath();
                绘图环境.arc(当前球.x, 当前球.y, 当前球.r, 0, Math.PI * 2);
                绘图环境.closePath();
                绘图环境.fill();
                if (当前球.y > 地面) {
                    当前球.y = 地面;
                    当前球.vx = 当前球.vy = 当前球.ay = 0;
                }
                if (当前球.colorA <= 0) {
                    小球集合.splice(i, 1);
                }
                当前球.x += 当前球.vx * t;
                当前球.y += 当前球.vy * t;
                当前球.vy += 当前球.ay * t;
                当前球.colorA -= 当前球.hideSpeed * t;
                当前球.color = 当前球.colorRgb + 当前球.colorA + ")";
            }
        }
        function 小球() {
            this.colorRgb = "rgba(" + (255 - Math.floor(Math.random() * 200)) + "," + (255 - Math.floor(Math.random() * 200)) + "," + (255 - Math.floor(Math.random() * 200)) + ",";
            this.colorA = 1;
            this.color = this.colorRgb + this.colorA + ")";
            this.x = 画布.width / 2;
            this.y = 地面;
            this.vx = (Math.random() - 0.5) * 0.2;
            this.vy = -0.4;
        }
        小球.prototype.r = 5;
        小球.prototype.ay = 0.0002;
        小球.prototype.hideSpeed = 0.0002;
    };
</script>
</body>
</html>

2016-06-17 00:00

leeqihero

等　级：论坛游侠
威　望：7
帖　子：122
专家分：135
注　册：2016-3-24

第 7 楼

得分:0

<html>
<head>
<meta charset="utf-8"/>
<style>
html, body {
    margin: 0;
    padding: 0;
    background-color: #000;
}
canvas {
    display: block;
}
</style>
</head>
<body>
<canvas id="画布"></canvas>
</body>
<script>
var 小球集合=[],刷新时间=16.67,小球每毫秒数量=0.05;
var 画布=document.getElementById("画布");
画布.width=document.body.clientWidth;
画布.height=(document.documentElement.scrollHeight>document.body.clientHeight?document.documentElement.scrollHeight:document.body.scrollHeight);
var 地面=画布.height-10;
var 绘图环境=画布.getContext("2d");
setInterval(重绘,刷新时间);
function 重绘(){
    var 小球密度=刷新时间*小球每毫秒数量;
    var 新小球数量=Math.floor(小球密度)+((Math.random()<(小球密度-Math.floor(小球密度)))?1:0);
    for(var i=0;i<新小球数量;i++)小球集合.push(new 小球());
    绘图环境.clearRect(0,0,画布.width,画布.height);
    画(小球集合);
}
function 随机色(){
    return 255-Math.floor(Math.random()*200);
}
function 小球色(a){
    return "rgba("+随机色()+","+随机色()+","+随机色()+","+a+")";
}
function 画(列表) {
    for(var i=列表.length-1;i>=0;i--){
        var 当前球=列表[i];
        绘图环境.fillStyle=当前球.color;
        绘图环境.beginPath();
        绘图环境.arc(当前球.x,当前球.y,当前球.r,0,Math.PI*2);
        绘图环境.closePath();
        绘图环境.fill();
        if (当前球.y>地面){
            当前球.y=地面;
            当前球.vx=当前球.vy=当前球.ay=0;
        }
        if (当前球.colorA<=0)小球集合.splice(i,1);
        当前球.x+=当前球.vx*刷新时间;
        当前球.y+=当前球.vy*刷新时间;
        当前球.vy+=当前球.ay*刷新时间;
        当前球.colorA-=当前球.消失速度*刷新时间;
        当前球.color=小球色(this.colorA);
    }
}
function 小球(){
    this.colorA=1;
    this.color=小球色(this.colorA);
    this.x=画布.width/2;
    this.y=地面;
    this.vx=(Math.random()-0.5)*0.2;
    this.vy=-0.4;
}
小球.prototype.r=5;
小球.prototype.ay=0.0002;
小球.prototype.消失速度=0.0002;
</script>
</html>

2016-06-21 08:53

龙神

等　级：论坛游侠
威　望：1
帖　子：35
专家分：130
注　册：2016-6-16

第 8 楼

得分:0

弹跳小球喷泉

程序代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>弹跳小球喷泉</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            background-color: #000;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="画布"></canvas>
    <script>
        window.addEventListener('load', function () {
            var 画布 = document.getElementById("画布"), 绘图环境 = 画布.getContext("2d"), 小球集合 = [], 刷新时间 = 16.67, 小球每毫秒数量 = 0.1;
            画布.width = document.body.clientWidth;
            画布.height = (document.documentElement.scrollHeight > document.body.clientHeight ? document.documentElement.scrollHeight : document.body.clientHeight);
            var 地面 = 画布.height - 10, now = Date.now(), then, t, twoPi = Math.PI * 2;
            setInterval(重绘, 刷新时间);
            function 重绘() {
                then = now;
                now = Date.now();
                t = now - then;
                var e = t * 小球每毫秒数量; //小球密度期望值
                var 新小球数量 = Math.floor(e) + ((Math.random() < (e - Math.floor(e))) ? 1 : 0);
                for (var i = 0; i < 新小球数量; i++)
                    小球集合.push(new 小球());
                绘图环境.clearRect(0, 0, 画布.width, 画布.height);
                for (var i = 小球集合.length - 1; i >= 0; i--) {
                    var 当前球 = 小球集合[i];
                    绘图环境.fillStyle = 当前球.getColor();
                    绘图环境.beginPath();
                    绘图环境.arc(当前球.x, 当前球.y, 当前球.r, 0, twoPi);
                    绘图环境.closePath();
                    绘图环境.fill();
                    if (当前球.y > 地面 && 当前球.vy > 0) {
                        当前球.vy = -当前球.vy * (Math.random() * 0.5 + 0.25);
                    }
                    if (当前球.colorA <= 0) {
                        小球集合.splice(i, 1);
                    }
                    当前球.move(t);
                }
            }
            function 小球() {
                this.colorRgb = "rgba(" + (255 - Math.floor(Math.random() * 200)) + "," + (255 - Math.floor(Math.random() * 200)) + "," + (255 - Math.floor(Math.random() * 200)) + ",";
                this.colorA = 1;
                this.x = 画布.width / 2;
                this.y = 地面;
                this.vx = (Math.random() - 0.5) * 0.2;
                this.vy = -0.4;
            }
            小球.prototype.getColor = function () { return this.colorRgb + this.colorA + ")"; }
            小球.prototype.move = function (t) {
                this.x += this.vx * t;
                this.y += this.vy * t;
                this.vy += this.ay * t;
                this.colorA -= this.hideSpeed * t;
            };
            小球.prototype.r = 5;
            小球.prototype.ay = 0.0002;
            小球.prototype.hideSpeed = 0.0001;
        });
    </script>
</body>
</html>

2016-06-21 16:36

龙神

等　级：论坛游侠
威　望：1
帖　子：35
专家分：130
注　册：2016-6-16

第 9 楼

得分:0

使用paper.js改写之后，程序更加简洁易维护。然而代价是性能和自定义程度有所降低。

程序代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>弹跳小球喷泉</title>
    <style>
        html, body {
            background-color: #000;
            margin: 0;
            overflow: hidden;
            height: 100%;
        }
        canvas[resize] {
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="dist/paper-full.min.js"></script>
    <script type="text/paperscript" canvas="画布">
        var 画布 = document.getElementById("画布"), 小球集合 = [], 小球每毫秒数量 = 0.01, 地面 = 画布.height - 10;
        var 出发点 = new Point(画布.width / 2, 地面), now = Date.now(), then, t, twoPi = Math.PI * 2, 重力加速度 = 0.0002, 小球消失速度 = 0.0001;
        function onFrame(event) {
            then = now;
            now = Date.now();
            t = now - then;
            var e = t * 小球每毫秒数量; //小球密度期望值
            var 新小球数量 = Math.floor(e) + ((Math.random() < (e - Math.floor(e))) ? 1 : 0), myCircle, 当前球;
            for (var i = 0; i < 新小球数量; i++) {
                myCircle = new Path.Circle(出发点, 5);
                myCircle.vx = (Math.random() - 0.5) * 0.2;
                myCircle.vy = -0.4;
                myCircle.move= function (t) {
                    this.position.x += this.vx * t;
                    this.position.y += this.vy * t;
                    this.vy += 重力加速度 * t;
                    this.opacity -= 小球消失速度 * t;
                };
                myCircle.fillColor = "rgb(" + (255 - Math.floor(Math.random() * 200)) + "," + (255 - Math.floor(Math.random() * 200)) + "," + (255 - Math.floor(Math.random() * 200)) + ")";
                myCircle.opacity = 1;
                小球集合.push(myCircle);
            }
            for (i = 小球集合.length - 1; i >= 0; i--) {
                当前球 = 小球集合[i];
                if (当前球.position.y > 地面 && 当前球.vy > 0) {
                    当前球.vy = -当前球.vy * (Math.random() * 0.5 + 0.25);
                }
                if (当前球.opacity <= 0.03) {
                    小球集合.splice(i, 1);
                    当前球.remove();
                }
                当前球.move(t);
            }
        }
    </script>
</head>
<body>
<canvas id="画布" resize></canvas>
</body>
</html>

[此贴子已经被作者于2016-6-24 01:06编辑过]

2016-06-24 00:59

龙神

等　级：论坛游侠
威　望：1
帖　子：35
专家分：130
注　册：2016-6-16

第 10 楼

得分:0

小球弹跳喷泉带动态模糊效果版

程序代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>弹跳小球喷泉</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            background-color: #000;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
<canvas id="画布"></canvas>
<script>
    'use strict';
    window.addEventListener('load', function () {
        var 画布 = document.getElementById("画布"), 绘图环境 = 画布.getContext("2d"), 小球集合 = [], 刷新时间 = 16.67, 小球每毫秒数量 = 0.02;
        绘图环境.globalAlpha = 0.1;
        画布.width = document.body.clientWidth;
        画布.height = (document.documentElement.scrollHeight > document.body.clientHeight ? document.documentElement.scrollHeight : document.body.clientHeight);
        var 地面 = 画布.height - 10, now = Date.now(), then, t, twoPi = Math.PI * 2;
        setInterval(重绘, 刷新时间);
        function 重绘() {
            then = now;
            now = Date.now();
            t = now - then;
            var e = t * 小球每毫秒数量; //小球密度期望值
            var 新小球数量 = Math.floor(e) + ((Math.random() < (e - Math.floor(e))) ? 1 : 0);
            for (var i = 0; i < 新小球数量; i++)
                小球集合.push(new 小球());
            绘图环境.clearRect(0, 0, 画布.width, 画布.height);
            for (var i = 小球集合.length - 1; i >= 0; i--) {
                var 当前球 = 小球集合[i];
                for (var j=-3; j<4; j++) {
                    绘图环境.fillStyle = 当前球.color.replace(/,[0-9\.]*\)/, ','+当前球.colorA*(1-Math.abs(0.3*j))+')');
                    绘图环境.beginPath();
                    绘图环境.arc(当前球.x + j*当前球.vx*t*0.2, 当前球.y + j*当前球.vy*t*0.2, 当前球.r, 0, twoPi);
                    绘图环境.closePath();
                    绘图环境.fill();
                }
                if (当前球.y > 地面 && 当前球.vy > 0) {
                    当前球.vy = -当前球.vy * (Math.random() * 0.5 + 0.25);
                }
                if (当前球.colorA <= 0) {
                    小球集合.splice(i, 1);
                }
                当前球.move(t);
            }
        }
        function 小球() {
            this.colorRgb = "rgba(" + (255 - Math.floor(Math.random() * 200)) + "," + (255 - Math.floor(Math.random() * 200)) + "," + (255 - Math.floor(Math.random() * 200)) + ",";
            this.colorA = 0.7;
            this.x = 画布.width / 2;
            this.y = 地面;
            this.vx = (Math.random() - 0.5) * 0.2;
            this.vy = -0.4;
        }
        小球.prototype = {
            ay: 0.0002,
            get color() { return this.colorRgb + this.colorA + ")" },
            hideSpeed: 0.0001,
            move: function(t) {
                this.x += this.vx * t;
                this.y += this.vy * t;
                this.vy += this.ay * t;
                this.colorA -= this.hideSpeed * t;
            },
            r: 5,
        };
    });
</script>
</body>
</html>

2016-06-24 11:20

快速回复：小球喷泉