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.sqrt(Math.pow(center.x, 2), Math.pow(center.y, 2));
        this.init = function() {
            this.canvas = document.createElement("canvas");
            document.body.appendChild(this.canvas);
            this.context = this.canvas.getContext("2d");
            this.start();
            this.resize();
            // 
            window.addEventListener("resize", this.resize.bind(this));
        }
    
        this.start = function() {
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
            this.stars = [];
            for (var i = 0; i < this.starsCounter; i++) {
                this.stars.push(new Star());
            }
        }
    
        this.resize = function() {
            this.canvas.width = window.innerWidth;
            this.canvas.height = window.innerHeig.........完整代码请登录后点击上方下载按钮下载查看