js实现canvas空间大爆炸视觉动画效果代码-html代码-BFW代码库

js实现canvas空间大爆炸视觉动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现空间大爆炸视觉动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        * {
          box-sizing: border-box;
        }
        html {
          height: 100%;
        }
        body {
          background: radial-gradient(#bbb, transparent 16%) 0 0, radial-gradient(#bbb, transparent 16%) 8px 8px, radial-gradient(rgba(0, 0, 0, 0.2) 15%, transparent 20%) 0 1px, radial-gradient(rgba(0, 0, 0, 0.2) 15%, transparent 20%) 8px 9px;
          background-color: #cccccc;
          background-size: 16px 16px;
          overflow: hidden;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
        }
        canvas {
          border: 30px solid #bbb;
          padding: 0;
          margin: 0;
          outline: none;
          box-shadow: 2px 20px 13px rgba(0, 0, 0, 0.75);
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 600;
          height: 600;
          z-index: 0;
        }
    </style>


</head>

<body>
    <canvas id="canvas" width="600" height="600"></canvas>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script>
        let STARS_MAX = 1800;
        let MAX_DEPTH = 4;
        let stars = new Array(STARS_MAX);
        let animation;
        let points = [];
        let frame = 0;
        
        this.blur = 0.03;
        this.speed = 0.05;
        this.angle = 5.0;
        this.surface;
        this.width = 600;
        this.height = 600;
        
        const star_image = new Image();
        star_image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF62lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzUyLCAyMDIwLzAxLzMwLTE1OjUwOjM4ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6ZGM9Imh0dHA6Ly9w.........完整代码请登录后点击上方下载按钮下载查看