js实现canvas有色气体烟雾汇聚成爱心的加载动画效果代码-html代码-BFW代码库

js实现canvas有色气体烟雾汇聚成爱心的加载动画效果代码

代码语言：html

代码描述：js实现canvas有色气体烟雾汇聚成爱心的加载动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html,body{
            padding:0;
            margin:0;
            overflow:none;
            width:100%;
            height:100%;
        }
        
        body {
            background: linear-gradient(135deg, rgba(0,0,0,0.14), rgba(0,0,0,0.24));
            font-family: 'Ubuntu', sans-serif;
            background-position:center center;
            background-size:cover;
            color: #121212;
        }
        .loader{
            position:absolute;
            top:50%;
            margin:-240px;
            left:50%;
            width:480px;
            height:480px;    
        }
        .loader h1{
            position: absolute;
            top:0px;
            left:0px;
            text-align: center;
            width:100%;
            top:0px;
            line-height:420px;
            font-size:24px;
            color:rgba(0,0,0,0.24);
            font-weight:100;
        }
    </style>




</head>

<body>
    <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,300' rel='stylesheet' type='text/css'>
    <div class="loader">
        <canvas width="480px" height="480px" id="loader"></canvas>
        <h1>Loading</h1>
    </div>

    <script>
        Loadr = new function Loadr(id) {
          // # Defines
          const max_size = 24;
          const max_particles = 1500;
          const min_vel = 20;
          const max_generation_per_frame = 10;
        
          // #Variables
          // sometimes i wrote code horrible enouhg to make eyes bleed 
          var canvas = document.getElementById(id);
          var ctx = canvas.getContext('2d');
          var height = canvas.height;
          var center_y = height / 2;
          var width = canvas.width;
          var center_x = width / 2;
          var animate = true;
          var particles = [];
          var last = Date.now(),now = 0;
          var died = 0,len = 0,dt;
        
          function isInsideHeart(x, y) {
            x = (x - center_x) / center_x * 3;
            y = (y - center_y) / center_y * -3;
            // Simplest Equation of lurve
            var x2 = x * x;
            var y2 = y * y;
            // Simplest Equation of lurve
        
            return Math.pow(x2 + y2 - 1, 3) - x2 * (y2 * y) < 0;
        
          }
        
          function random(size, freq) {
            var val = 0;
            var iter = freq;
        
            do {
              size /= iter;
              iter += freq.........完整代码请登录后点击上方下载按钮下载查看