js实现canvas多彩粒子漂浮连线碰撞动画效果代码-html代码-BFW代码库

js实现canvas多彩粒子漂浮连线碰撞动画效果代码

代码语言：html

所属分类：粒子

代码描述：js实现canvas多彩粒子漂浮连线碰撞动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        #canvas{background:#222;}
        html{margin:0;padding:0;background:#222;}
    </style>



</head>

<body>
    <canvas id="canvas">

</canvas>


    <script>
        window.requestAnimFrame = function ()
        {
          return (
            window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function ( /* function */callback) {
              window.setTimeout(callback, 1000 / 60);
            });
        
        }();
        
        var canvas = document.getElementById('canvas');
        
        var context = canvas.getContext('2d');
        
        var W = window.innerWidth,H = window.innerHeight;
        canvas.width = W;
        canvas.height = H;
        
        var particle_count = 40,
        particles = [],
        couleurs = ["#2ecc71", "#3498db", "#f1c40f", "#e74c3c"];
        function Particle()
        {
        
          this.radius = Math.round(Math.random() * 5 + 5);
          this.x = Math.floor(Math.random() * canvas.width / 2 + 50);
          this.y = Math.floor(Math.random() * canvas.height / 2 + 50);
          this.color = couleurs[Math.round(Math.random() * couleurs.length)];
          this.speedx = Math.round(Math.random() * 201 + 0) / 100;
          this.speedy = Math.round(Math.random() * 201 + 0) / 100;
        
          switch (Math.round(Math.random() * couleurs.length)) {
        
            case 1:
              this.speedx *= 1;
              this.speedy *= 1;
              break;
            case 2:
              this.speedx *= -1;
              this.speedy *= 1;
              break;
            case 3:
              this.speedx *= 1;
              this.speedy *= -1;
              break;
            case 4:
              this.speedx *= -1;
              this.speedy *= -1;
              break;}
        
        
          this.move = function ()
          {
        
            conte.........完整代码请登录后点击上方下载按钮下载查看