canvas浩瀚星空动画效果-html代码-BFW代码库

canvas浩瀚星空动画效果

代码语言：html

所属分类：背景

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    width: 100%;
}

body{
    background: linear-gradient(to bottom, #131b23, #0a1443);
}

#wrap {
    height: 100%;
    width: 100%;
}

canvas {
    display: block;
}
</style>

</head>
<body translate="no">
<div id="wrap">
<canvas id="canvas">
canvas not support
</canvas>
</div>

<script>
'use strict';

{
  window.onload = function () {
    const canvas = document.querySelector('canvas');
    if (typeof canvas.getContext === 'undefined') {
      return;
    }
    const ctx = canvas.getContext("2d");


    // Canvas Resize
    function fitCanvasSize() {

      canvas.width = document.documentElement.clientWidth;
      canvas.height = document.documentElement.clientHeight;

    }
    fitCanvasSize();
    window.onresize = fitCanvasSize;

    // RequestAnimationFrame
    (function () {
      var requestAnimationFrame = window.requestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.msRequestAnimationFrame;
      window.requestAnimationFrame = requestAnimationFrame;
    })();

    const colors = ['#000030', '#4d4398', '#4784bf', '#000030', '#4d4398', '#ffffff'];

    //Utility Function
    function randomIntFromRange(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

    function randomColor(colors) {
      return colors[Math.floor.........完整代码请登录后点击上方下载按钮下载查看