<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #canvas {

                position: fixed;

                z-index: -1;

                top: 0;

                height: 100%;

                width: 100%;

                background: radial-gradient(#374566, #010203);

            }

        </style>

    </head>

    <body>

        <canvas id="canvas"></canvas>

        <script type="text/javascript">

            // CANVAS

            var canvas = document.getElementById("canvas");

            var ctx = canvas.getContext("2d");

            var cw = canvas.width = window.innerWidth,

                cx = cw / 2;

            var ch = canvas.height = window.innerHeight,

                cy = ch / 2;

            var requestId = null;

            var colors = ["#93DFB8", "#FFC8BA", "#E3AAD6", "#B5D8EB", "#FFBDD8"];

            function Particle() {

                this.x = Math.random() * cw;

                this.y = Math.random() * ch;

                this.r = 15 + ~~(Math.random() * 20); //radius of the circumcircle

                this.minR = 2 + ~~(Math.random() * 2) ;

                this.maxR = 6 + ~~(Math.random() * 2) ;

                this.l = 3 + ~~(Math.random() * 2); //polygon sides

                this.a = 2 * Math.PI / this.l;      // angle between polygon vertices

                this.rot = Math.random() * Math.PI; // polygon rotation

                this.speed = .05 + Math.random() / 2;

                this.rotSpeed = 0.005 + Math.random() * .005;

                this.color = colors[~~(Math.random() * colors.length)];

            }

            Particle.prototype.update = function() {

                if(this.y < -this.r) {

                    this.y = ch + this.r;

                    this.x = Math.random() * cw;

                }

                this.y -= this.speed;

            }

            Particle.prototype.draw = function() {

                ctx.save();      //多边形

                ctx.translate(this.x, this.y);

                ctx.rotate(this.rot);

                ctx.beginPath();

                for(var i = 0; i < this.l; i++) {

                    var x = this.r * Math.cos(this.a * i);

                    var y = this.r * Math.sin(this.a * i);

                    ctx.lineTo(x, y);

                }

                ctx.closePath();

                ctx.lineWidth = 4;

                ctx.strokeStyle = this.color;

                ctx.stroke();

                ctx.restore();

                ctx.save();       //星星

                ctx.beginPath();

                ctx.translate(this.x / 1.1, this.y / 2);

                ctx.rotate(this.rot);

                ctx.globalAlpha = light;

                for(var i = 0; i < 5; i ++){

                    var x = 5;

                    var y = 5;

                    ctx.lineTo( Math.cos( (18 + i*72 )/180 * Math.PI) * this.maxR + x,

                                -Math.sin( (18 + i*72 )/180 * Math.PI) * this.maxR + y)

                    ctx.lineTo( Math.cos( (54 + i*72 )/180 * Math.PI) * this.minR + x,

                                -Math.sin( (54 + i*72 )/180 * Math.PI) * this.minR + y)

                }

                ctx.closePath();

                ctx.lineWidth = 1;

                ctx.fillStyle = "#fbd94e";

                ctx.strokeStyle = "#fbd94e";

                ctx.lineJoin = "round";

                ctx.fill();

                ctx.stroke();

                ctx.restore();

            }

            var particles = [];

            for(var i = 0; i < 20; i++) {

                var p = new Particle();

                particles.push(p)

            }

            function Draw() {

                requestId = window.requestAnimationFrame(Draw);

                //ctx.globalAlpha=0.65;

                ctx.clearRect(0, 0, cw, ch);

                particles.map((p) => {

                    p.rot += p.rotSpeed;

                    p.update();

                    p.draw();

                })

            }

            function Init() {

                if(requestId) {

                    window.cancelAnimationFrame(requestId);

                    requestId = null;

                }

                cw = canvas.width = window.innerWidth, cx = cw / 2;

                ch = canvas.height = window.innerHeight, cy = ch / 2;

                //particles.map((p) => p.update());

                Draw();

            };

            setTimeout(function() {

                Init();

                window.addEventListener('resize', Init, false);

            }, 15);

            var light = 1;    //透明度

            setInterval(function(){

                if(light == 1){

                    light = .5;

                }else{

                    light = 1;

                }

            },350)

        </script>

    </body>

</html>

星星闪烁+多边形移动 canvas的更多相关文章

  1. 怎么实现类似星星闪烁的效果（box-shadow）

    有时候设计希望我们能够在页面实现类似星星闪烁的效果,如图: 我的解决办法是用box-shadow: html <div class="star04 active-blink" ...

  2. 原生js实现星星闪烁的效果

    星星闪烁的原理其实很简单: html代码: <body style="background:#000"> <div id="stars_box" ...

  3. JS框架_(JQuery.js)夜晚天空满天星星闪烁动画

    百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...

  4. canvas 星星闪烁的效果

    代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  5. Silverlight之我见——制作星星闪烁动画

    圣诞节来了,无聊,做点东西纪念一下. 原理很简单,生成1000个圆,从随机数来布置它们的位置,通过动画来处理它们的透明度,动画时长也是随机生成. 1.创建图形数组并设置背景透明,渐变笔触,大小等,而后 ...

  6. html5实例-闪烁的星星

    一.绘制五角星 1.1页面结构 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  7. 如何用PowerPoint制作闪烁的星星

    在PPT中,PPT动画说是幻灯片PPT中的精华是当之无愧的!ppt文件有了动画,犹如插上翅膀的鸟,让PPT的色彩衍生出了更多的特色.只要你的ppt动画效果制作的对,你的幻灯片将明显与众不同,观众也更容 ...

  8. 我用canvas带你看一场流星雨

    前言 最近总是梦见一些小时候的故事,印象最深刻的就是夏天坐在屋顶上,看着满天的繁星,一颗,两颗,三颗...不由自主地开始了数星星的过程.不经意间,一颗流星划过夜间,虽然只是转瞬即逝,但它似乎比夜空中的 ...

  9. 星星dom

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>星星&l ...

随机推荐

  1. ajax错误类型大全

    https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html ajax错误类型大全

  2. 关于php下的ajax赋值传值的调试

    在tp中, 在js中也可以使用 模板变量替换(比如__PUBLIC__)和 模板函数调用(比如: {:U('..')}) 等. 但是 只有直接放在 相应的 模板文件中, 只有放在index.html之 ...

  3. 论文笔记：Decoders Matter for Semantic Segmentation: Data-Dependent Decoding Enables Flexible Feature Aggregation

    Decoders Matter for Semantic Segmentation: Data-Dependent Decoding Enables Flexible Feature Aggregat ...

  4. scala链接mysql

    方法一:链接并操作mysql //链接Mysqlval driver = "com.mysql.jdbc.Driver"val url = "jdbc:mysql://1 ...

  5. Python3环境搭建

    Python3环境搭建   Windows系统下安装Python3 Python3 下载 Python3 最新源码,二进制文档,新闻资讯等可以在 Python 的官网查看到: Python 官网:ht ...

  6. OpenGL.Qt532.cube

    1.官方的例子(安装好代源码的Qt532就有该例子) E:\Project_Qt532\Official_Examples\opengl\cube E:\Project_Qt532\Official_ ...

  7. 从mysql向HBase+Phoenix迁移数据的心得总结

    * 转载请注明出处 - yosql473 - 格物致知,经世致用 mysql -> HBase + Phoenix 1.总体方案有哪些? 1)通过Sqoop直接从服务器(JDBC方式)抽取数据到 ...

  8. lua调用不同lua文件中的函数

    a.lua和b.lua在同一个目录下 a.lua调用b.lua中的test方法,注意b中test的写法 _M 和 a中调用方法: b.lua local _M = {}function _M.test ...

  9. 干货 | 揭秘如何增加listing多个类目节点

    流量是电商销售的必要因素,可以说,任何成功的电商平台都离不开流量.亚马逊listing优化做得好,不仅能提高产品的曝光率,还能提升转换率,而好的类目可以吸引大的流量.帮你快速爬升. 首先我们来了解一下 ...

  10. LeetCode--027--移除元素(java)

    给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...