<!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. canvas与svg

    canvas与svg都是用于在网页上绘制图形(位图). canvas是HTML5新出来的一个标签,用来定义一块画图的区域(canvas本身没有绘制能力),用JavaScript来画图,可以绘制路径.矩 ...

  2. JS高程13.3事件对象的学习笔记

    1.事件流 事件流描述的是页面中元素接收事件的顺序.比如你单击了某个按钮,他们都认为单击事件不仅仅发生在按钮上,换句话说,在单击按钮的同时,你也单击了按钮的容器元素,甚至还单击了整个页面.那么你到底是 ...

  3. snmp模拟器snmpsid使用

    snmpsim使用 安装 pip install snmpsim 简单使用 生成snmpwalk文件: snmpwalk -v2c -c 'password' -ObentU 218.200.x.15 ...

  4. 比原链（Bytom）先知节点 Windows接入文档

    系统要求 我们建议选择知名的VPS服务商,运行比原链节点对算力没有要求,但是请配置尽可能大的磁盘空间. 节点服务器最小配置: 操作系统: Windows/Linux/Docker CPU: 2核 内存 ...

  5. Redis集群（主从模式）

    主从模型   在Redis的集群当中,每个节点(实例)都有一个身份:Master或者Slave,Master:主要负责数据写入,Slave一般提供数据读取,Master与Slave之间是一对多关系,M ...

  6. Redhat乱码

    1 首先可以使用echo $LANG命令输出当前字符集. 2 我们需要把字符集改为zh_CN.UTF-8,在/etc/sysconfig/i18n文件中进行修改 3 使用source  /etc/sy ...

  7. mysql基础篇（上篇）

    一.数据库 1.数据库介绍 2.RDBMS专业术语 3.MySQL数据库 4.常用数据库命令 1.数据库介绍 :什么是数据库 数据库就是按照数据结构来组织.存储和管理数据的仓库. 我们常常讲的数据库往 ...

  8. Vue-admin工作整理（九）： 状态管理Vuex-state和getters

    前提:通过项目结构个人设置创建的项目 store文件下actions.js.mutations.js.state.js都是根级别的状态管理,引用入口是通过index.js来实现,整个Vuex处理逻辑为 ...

  9. Java问题解决：springboot启动出现-Your ApplicationContext is unlikely to start due to a @ComponentScan of the default package

    参考资料: http://www.mamicode.com/info-detail-2101273.html https://blog.csdn.net/u012834750/article/deta ...

  10. 51nod 1201 整数划分 dp

    1201 整数划分 基准时间限制:1 秒 空间限制:131072 KB   收藏  关注 将N分为若干个不同整数的和,有多少种不同的划分方式,例如:n = 6,{6} {1,5} {2,4} {1,2 ...