<!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. Java过滤器Filter

    过滤器 一. 简介 过滤器一般用于设置字符编码.登录验证.权限验证.敏感词过滤等,减少了代码的冗余,便于代码的复用,但是不一定是每个servlet都必须使用过滤器的. 二. 过滤器的工作流程 图片来源 ...

  2. 软考自查：数据流图（DFD）

    数据流图(DFD) 内容提要 数据流图基本概念 数据字典 数据平衡原则 数据流图基本概念             数据字典     数据流图平衡原则 父图与子图之间的平衡 子图内平衡         ...

  3. MyBatis进阶（四）

    mapper.xml文件的编写 mapper.xml映射文件实现数据库和实体类之间的映射关系,定义操作数据库的sql语句. 主体部分 文件头部 <?xml version="1.0&q ...

  4. jenkins 配置

    配置: echo " aliyun.oss.access.key=LTAIz4Koeff8sCr8 " > ./src/main/resources/oss.dev.prop ...

  5. 多邻国学英语 tips

    来源: https://www.cnblogs.com/daysme整理了一分多邻国学英语中的相关语法文档. 地方 null 现在完成时 null 反身代词 浓缩的精华:反身代词就是 “XX 自己” ...

  6. 必会SQL练习题

    ()表名:购物信息 购物人 商品名称 数量 A 甲 B 乙 C 丙 A 丁 B 丙 …… 给出所有购入商品为两种或两种以上的购物人记录 答:); ()表名:成绩表 姓名 课程 分数 张三 语文 张三 ...

  7. JQuery 数组获取和删除元素

    <script> var target = []; target [0] = "aaa000"; target [1] = "bbb111"; ta ...

  8. sql server 学习笔记 ( row_number, rank, dense_rank over partition by order by )

    refer : https://blog.csdn.net/winer2008/article/details/4283539 https://www.cnblogs.com/linJie193090 ...

  9. linux中的wc命令

    linux中wc命令用法 Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1．命令格式: wc [选项]文件... 2．命令功能: ...

  10. Flutter采坑之路 用真机跑起来的时候提示 initGradle失败，IO异常，downloading Gradle-4.6-all.zip失败

    这个异常就是Gradle下载异常,进而下面会提示一行IO异常 我这里的原因就是Gradle对应的4.6-all版本下载不下来(一般情况下确实很难下载下来) 所以在正常AS工程呢,我们选择一下Gradl ...