失言就是一不小心说了实话 [登录·注册]

吕滔博客

首页 开发 运维 工具 摄影

html5+javascript星空旋转的背景效果

前端设计 memory发布于January 12, 2017 标签: Javascript

来个预览图

直接上代码

<body style="height: 100%;background-color:#141414;">
<canvas id="canvas"></canvas>
<script>
    "use strict";

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

            hue = 217,
            stars = [],
            count = 0,
            maxStars = 1200;

    var canvas2 = document.createElement('canvas'),
            ctx2 = canvas2.getContext('2d');
    canvas2.width = 100;
    canvas2.height = 100;
    var half = canvas2.width / 2,
            gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
    gradient2.addColorStop(0.025, '#fff');
    gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
    gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
    gradient2.addColorStop(1, 'transparent');

    ctx2.fillStyle = gradient2;
    ctx2.beginPath();
    ctx2.arc(half, half, half, 0, Math.PI * 2);
    ctx2.fill();

    // End cache

    function random(min, max) {
        if (arguments.length < 2) {
            max = min;
            min = 0;
        }

        if (min > max) {
            var hold = max;
            max = min;
            min = hold;
        }

        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function maxOrbit(x, y) {
        var max = Math.max(x, y),
                diameter = Math.round(Math.sqrt(max * max + max * max));
        return diameter / 2;
    }

    var Star = function() {

        this.orbitRadius = random(maxOrbit(w, h));
        this.radius = random(60, this.orbitRadius) / 12;
        this.orbitX = w / 2;
        this.orbitY = h / 2;
        this.timePassed = random(0, maxStars);
        this.speed = random(this.orbitRadius) / 200000;
        this.alpha = random(2, 10) / 10;

        count++;
        stars[count] = this;
    }

    Star.prototype.draw = function() {
        var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
                y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
                twinkle = random(10);

        if (twinkle === 1 && this.alpha > 0) {
            this.alpha -= 0.05;
        } else if (twinkle === 2 && this.alpha < 1) {
            this.alpha += 0.05;
        }

        ctx.globalAlpha = this.alpha;
        ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
        this.timePassed += this.speed;
    }

    for (var i = 0; i < maxStars; i++) {
        new Star();
    }

    function animation() {
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 0.8;
        ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
        ctx.fillRect(0, 0, w, h)

        ctx.globalCompositeOperation = 'lighter';
        for (var i = 1, l = stars.length; i < l; i++) {
            stars[i].draw();
        };

        window.requestAnimationFrame(animation);
    }

    animation();
</script>

canvas图层样式

position: fixed;top: 0px;left: 0px;z-index: -1;

相关推荐

添加新评论

网站状态

  • 栏目分类:35个
  • 发布文章:1097篇
  • 用户评论:604条

最新回复

  • 个人博客: 看看先
  • memory: 谢谢,已修正。
  • jrotty: 方法一中next后面少个'符号
  • daxia: mark
  • 企业孵化器: 厉害了
  • Bearox: 我也遇到了同样的问题,yum install dev86* 没用...
  • themebetter: 优化方法很不错。
  • 架构之路: 总结和nice,网站速度很快。
  • 架构之路: 总结的很好,简单、完整、高效。
  • memory: 我正在犹豫要不要更新了~~~ 因为1.2撇弃了php5.2,最低...
  • 灵九哲: medoo已经更新到v1.2了,博主更新下中文版网站内容
  • 灵九哲: medoo已经更新了v1.2,麻烦博主更新下中文版的网站,然后把...
  • memory: 用的typecho.
  • einsan: 涛哥,你的博客后端是自己开发的吗?还是使用哪一款开源产品?
  • yfly962464: 不行啊
  • memory: 哥们儿~非常不好意思,之前有段时间折腾jpress,后来就没有玩...
  • 夏日草博客: 记得很早的时候来过这个博客。
  • test1247: 好的,感谢。邮箱 121217605@qq.com
  • memory: 好的, 我回头找找呀。因为现在这个程序是php的,jpress的...
  • test1247: 这个jpress的主题能分享下吗