<!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. 解析docker中的环境变量使用和常见问题解决

    docker容器中的环境变量 docker可以为容器配置环境变量.配置的途径有两种: 在制作镜像时,通过ENV命令为镜像增加环境变量.在容器启动时使用该环境变量. 在容器启动时候,通过参数配置环境变量 ...

  2. MySQL 增删改查

    增--添加数据 新建数据库 create database newdatabase; 选择数据库 use newdatabase; 新建表 create table newtable(id int,n ...

  3. IOS runtime运行机制详解（一）

    OC运行机制是指,可以运行的时候动态调用函数.因为C语言必须在编译的时候就决定调用哪个函数. 我们平时写的OC代码,它在运行的时候也是转换成了runtime的方式运行的.任何方法调用本质:就是发送一个 ...

  4. windows安装并配置 nginx

    1,windows安装并配置 nginx 到nginx官网上下载相应的安装包,http://nginx.org/en/download.html: 下载并压缩放到自己目录下面,不要有中文目录 进入cm ...

  5. JS 作用域（执行环境）与作用链---JS 学习笔记（二）

    一  作用域(执行环境) 作用域:定义了变量和函数有权访问的其他数据,决定了他们各自的行为.--------<JS高级程序设计>4.2 好难理解啊~参考了参考尤克希的博客内容,大体上理解了 ...

  6. docker使用笔记

    项目部署时用到了docker,以下分享了我在实践中使用的指令,和对docker一些个人的理解(※和字体加重部分) 本文选择使用网易的镜像源:https://c.163.com/hub#/m/home/ ...

  7. storybook构建vue组件

    最近在研究业务型组件的使用,因为在单独开发组件的时候需要调试,所以为每一个组件都编写一个webpack开发环境,然后上传上去为了其他人可以直接使用又把webpack上传上去,这样会有两个问题: 1:每 ...

  8. 记一次linux上的ftp搭建过程

    最近公司测试环境需要搭建ftp,正好自己稍微有点空且这方面确实不会,就自告奋勇说让我先试试,玩炸了你们再帮忙重装系统重新搭吧(手动滑稽),虽然最终是完成了,但是中间磕磕碰碰遇到一些小问题,到处查百度, ...

  9. widerface---VOC

    import os, h5py, cv2, sys, shutil import numpy as np from xml.dom.minidom import Document rootdir = ...

  10. SpringBoot+mybatis:报错Fri Oct 19 14:29:24 CST 2018 WARN: Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requiremen

    报错:Fri Oct 19 14:29:24 CST 2018 WARN: Establishing SSL connection without server's identity verifica ...