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,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF62lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzUyLCAyMDIwLzAxLzMwLTE1OjUwOjM4ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wOkNyZWF0ZURhdGU9IjIwMTMtMTEtMjlUMTY6NTg6MTktMDU6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTA1LTExVDAwOjEzOjE3LTA0OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIwLTA1LTExVDAwOjEzOjE3LTA0OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmVhNGRhN2U3LTBhZDctNDFkZC1hMmI1LTNlODVhNmEyNjg1YyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyQ0IxQTA0QTUxNjUxMUUzOTJCQkUwNzExNUQ1MDRFNSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjJDQjFBMDRBNTE2NTExRTM5MkJCRTA3MTE1RDUwNEU1IiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkNCMUEwNDc1MTY1MTFFMzkyQkJFMDcxMTVENTA0RTUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkNCMUEwNDg1MTY1MTFFMzkyQkJFMDcxMTVENTA0RTUiLz4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZWE0ZGE3ZTctMGFkNy00MWRkLWEyYjUtM2U4NWE2YTI2ODVjIiBzdEV2dDp3aGVuPSIyMDIwLTA1LTExVDAwOjEzOjE3LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2.........完整代码请登录后点击上方下载按钮下载查看