<!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. uirecorder 启动webdriver服务报错

    在安装好uirecorder后,执行起来是各种错误. 不是少这个就是缺那个,也是因为自己对自动化测试知识太匮乏. 导致刚开始走自动化测试绕了很多弯路,报个错都不知所措.后来才知道要多看ERROR后面的 ...

  2. maven中引入oracle驱动报错Missing artifact com.oracle:ojdbc14:jar:10.2.0.4.0

    转自https://blog.csdn.net/lovesomnus/article/details/49512777 在maven中央库中查找ojdbc,发现最新的版本是10.2.0.4.0,然后在 ...

  3. OpenStack入门科普

    看完OpenStack入门科普,看这一篇就够啦!这篇文章,做些记录. 一.OpenStack简介:OpenStack就是为了云计算服务的.简单来说,它是一个操作系统,一套软件,一套IaaS软件. 1. ...

  4. python程序—封装案例

    需求: 1.房子有户型.总面积.家具名称列表 房子没有任何家具 2.家具有名字和占地面积,其中 席梦思(bed):4平米 衣柜(chest): 2平米 餐桌(table): 1.5平米 3.将以上3个 ...

  5. Hadoop2.X管理与开发

    Hadoop 2.X 管理与开发 一.Hadoop的起源与背景知识 (一)什么是大数据 大数据(Big Data),指无法在一定时间范围内用常规软件工具进行捕捉.管理和处理的数据集合,是需要新处理模式 ...

  6. java异常处理try catch finally

    1       异常 1.1      异常处理的作用 在编程时,如果出现文件打开失败,读写文件就会异常退出.如果出现内存溢出错误,程序也会异常退出.如果不能对这些异常进行处理.程序则无法正常运行.所 ...

  7. java代理通俗简单解析

    1         代理 1.1            代理的概念和作用 代理的概念很好理解,就像黄牛代替票务公司给你提供票,经纪人代理艺人和别人谈合作.Java的代理是指实现类作为代理类的属性对象, ...

  8. Go语言学习之15 商品秒杀开发与接入层实现

    outline 1. 秒杀抢购接入层实现2. 秒杀逻辑层实现 秒杀接入层核心功能 秒杀逻辑层核心功能 SecKill接口 /seckill?product=20&source=android& ...

  9. [Maven - Java Version] 如何设置Maven的Java版本或者使用不同的JDK版本编译

    In pom.xml, defined this maven.compiler.source properties to tell Maven to use Java 8 to compile the ...

  10. 获取的输入内容，没有被P标签包裹的文本和元素进行处理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...