美丽的杭州

js html5实现星星动画背景特效

系统分类: 网页特效 - js特效 2015-04-27

人气36672

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


一个用js实现星星动画背景效果,星星的五个角会分开飞向不同的方向

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>js html5实现星星动画背景特效</title>
<style>
    canvas {
  position:absolute;
  background-color:black;
  top:0; left:0;
}
</style>
</head>
<body>
<canvas id=c></canvas>
    <script>

        var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext('2d'),

    spawnProb = .3,
    absoluteDelay = 50,
    minSize = 5,
    maxSize = 20,
    minRot = .01,
    maxRot = .1,
    minDelay = 3,
    maxDelay = 5,
    minSpeed = 1,
    maxSpeed = 10,

    radSlice = Math.PI * 2 / 5,
    frame = 0,
    vertices = [];

        function rand(min, max) {
            return Math.random() * (max - min) + min;
        }
        function genStar() {
            var size = rand(minSize, maxSize),
                rot = (rand(0, 1) > .5 ? -1 : 1) * rand(minRot, maxRot),
                delay = rand(minDelay, maxDelay),
                x = rand(0, w),
                y = rand(0, h),
                s = rand(minSpeed, maxSpeed),
                dir = rand(0, Math.PI * 2),
                vx = Math.cos(dir) * s,
                vy = Math.sin(dir) * s,
                color = 'hsla(hue, 80%, 50%, alp)'.replace('hue', frame % 360);

            for (var i = 0; i < 5; ++i) {
                vertices.push(new Vertex(size, rot, dir + radSlice * i, delay * i,
                      x + Math.cos(radSlice * i) * size,
                      y + Math.sin(radSlice * i) * size,
                                     vx, vy, x, y, color))
            }
        }
        function Vertex(size, rot, dir, delay, x, y, vx, vy, ox, oy, color) {
            this.size = size;
            this.rotSpeed = rot;
            this.rot = dir;
            this.delay = absoluteDelay + delay;
            this.life = 0;
            this.ox = ox;
            this.oy = oy;
            this.x;
            this.y;
            this.vx = vx;
            this.vy = vy;
            this.color = color;
        }
        Vertex.prototype.use = function () {
            ++this.life;
            if (this.life >= this.delay) {
                this.x += Math.cos(this.rot) * 3
                this.y += Math.sin(this.rot) * 3;

            } else {
                if (this.life <= absoluteDelay) {
                    this.rot += this.rotSpeed;
                    this.ox += this.vx;
                    this.oy += this.vy;
                }
                this.x = this.ox + Math.cos(this.rot) * this.size;
                this.y = this.oy + Math.sin(this.rot) * this.size;
            }

            var alpha = Math.min(this.life, absoluteDelay) / absoluteDelay;
            if (this.life > 100) alpha = (200 - this.life) / 100;

            ctx.lineWidth = this.size / 3;
            ctx.strokeStyle = this.color.replace('alp', alpha);
            ctx.translate(this.x, this.y);
            ctx.rotate(this.rot);
            ctx.beginPath();
            ctx.moveTo(-this.size / 3, -this.size / 2);
            ctx.lineTo(this.size, 0);
            ctx.lineTo(-this.size / 3, this.size / 2);
            ctx.stroke();
            ctx.rotate(-this.rot);
            ctx.translate(-this.x, -this.y);
        }

        function anim() {
            window.requestAnimationFrame(anim);

            ++frame;

            ctx.fillStyle = 'black';
            ctx.fillRect(0, 0, w, h);

            if (Math.random() < spawnProb) genStar();

            for (var i = 0; i < vertices.length; ++i) {
                var vert = vertices[i];
                vert.use();

                if (vert.x < 0 || vert.x > w ||
                   vert.y < 0 || vert.y > h ||
                    vert.life > 200) {
                    vertices.splice(i, 1);
                    --i;
                }
            }
        }
        anim();

    </script>
</body>

</html>


查看演示
下载资源:8
下载资源
错误提交:

格式:rar 大小:3.95KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1343.html 非特殊说明,本文版权归原作者所有,转载请注明出处
js html5实现星星动画背景特效

我当前G币余额:0 已下载次数:8

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:40

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

点击右侧分享按钮并且进行评论 +10G币(已有5 评论)