JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Canvas 喷泉</h3>
<canvas id="test" width="500" height="500"></canvas>

CSS

canvas {
            background-color: #000;
        }

JavaScript

(function() {
          var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                                      window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
          window.requestAnimationFrame = requestAnimationFrame;
        })();
        //h=（1/2）gt^2
        var open = true;
        
        var canvas = document.getElementById('test');
        var ctx = canvas.getContext('2d');
        var g = 0.05;
        var h = 60;
        var w = 60;
        var vx = 1;
        var vy = -2;
        var time = 0;
        var r = 8;
        var arr = [];//JSON.parse(localStorage.getItem('xxxx'));
        const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];
        var date = Date.now();
        var flag;
        var drawArr = [];
        var gravityPoint;
        

        document.getElementById('test').addEventListener('mousemove', function(event){
            var rect = event.currentTarget.getBoundingClientRect();
            var po = {
                x: event.clientX - rect.left,
                y: event.clientY - rect.top
              };
            
            gravityPoint = po;
            
            
        });
        function circle(x,y,r,color) {  
          ctx.fillStyle = color;
          ctx.beginPath();  
          ctx.arc(x, y, r, 0, Math.PI*2, true);  
          ctx.closePath();  
          ctx.fill();  
        } 
        
        
        function go(){
            
            if (gravityPoint) {
                if (Date.now() - date > 20) {
                    //console.log(Math.random() * (-4));
                    //var a = 
                    arr.push({
                        w:gravityPoint.x,
                        h:gravityPoint.y,
                        vx:Math.random() * (Math.random() > 0.5 ? 4 : -4),
                        vy:Math.random() * -14 - 7,
                        g:0.5,
                ...