canvas实现可调参数的宇宙星空旋转动画效果代码-html代码-BFW代码库

canvas实现可调参数的宇宙星空旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现可调参数的宇宙星空旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body{
      padding: 0;
      margin: 0;
      overflow: hidden;
      background: rgb(32,49,124);
      background: -moz-radial-gradient(center, ellipse cover, rgba(32,49,124,1) 0%, rgba(64,165,232,1) 100%);
      background: -webkit-radial-gradient(center, ellipse cover, rgba(32,49,124,1) 0%,rgba(64,165,232,1) 100%);
      background: radial-gradient(ellipse at center, rgba(32,49,124,1) 0%,rgba(64,165,232,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20317c', endColorstr='#40a5e8',GradientType=1 );
      background-attachment: fixed;
    }
    canvas {
      position: absolute;
      left: 0;
      top: 0;
    }
    </style>

</head>

<body>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script>
        var PI2 = Math.PI * 2;
    Math.dist = function(a, b) {
        var dx = a.x - b.x;
        var dy = b.y - b.y;
        return Math.sqrt(Math.pow(dx, 2), Math.pow(dy, 2));
    }
    var Stars = function(args) {
        if (args === undefined) args = {};
        var time = new Date().getTime();
        var _scope = this;
    
        this.stars = [];
        this.velocity = args.velocity || 1;
        this.radius = args.radius || 1;
        this.trail = true;
        this.alpha = 0.01;
        this.starsCounter = args.stars || 200;
        var center = {
            x: window.innerWidth / 2,
            y: window.innerHeight / 2
        };
        var maxDistance = Math.sq.........完整代码请登录后点击上方下载按钮下载查看