Canvas particle background effect

Canvas particle background effect

 canvas| |  in December 2017, 21

• Recently, someone asked me how to achieve the background effect of my blog, which is actually a canvas effect. Today, I would like to write a blog to share my ideas
• The Demo presentation
  

  There are two main steps

• The first is to randomly generate points based on window scaling
• Another is to calculate the distance between points, according to the distance generated line segment
• To sum up, this is the process of drawing dots
  

  The implementation process

1. The first step encapsulates a function mainBgFullScreen to initialize the canvas
   • Make the Canvas adaptive to the window

       width = $(':root').width();
       height = $(':root').height();
       zoom = getZoom();
       $canvas.attr('width', width);
       $canvas.attr('height', height);
     Copy the code

   • Since being adaptive requires listening for resize events, execute mainBgFullScreen in the callback
   • Drawing Canvas, fixed routine

       if ($canvas[0].getContext) {
           var ctx = $canvas[0].getContext('2d');
           ctx.fillStyle = '#ffffff';
           ctx.strokeStyle = 'rgba(255,255,255,0)';
           ctx.lineWidth = 1 * zoom;
           drawCanvas(ctx);
       }
     Copy the code

2. The second step is to draw dots and lines in the drawCanvas function according to certain logic
   1. Draw a point:
      • Package a factory to generate points of different sizes, different positions, and different speeds, which are generated according to the screen zoom ratio, ensuring that the display under each screen size is coordinated

        Function creatPoint() {var xsKew = (math.random () -0.5) * zoom; Var ysKew = (math.random () -0.5) * zoom; Var r = ~~(math.random () * 5 * zoom); var x = ~~(Math.random() * (width - r)) + 2 * r; var y = ~~(Math.random() * (height - r)) + 2 * r; var point = { x: x, y: y, xsKew: xsKew, ysKew: ysKew, r: r } return point; }Copy the code

      • During initialization of Canvas, some points are generated and inserted into the array. When drawing points, points are drawn in a circle

        For (var I = 0; i < ~~(200 * zoom); i++) { pointArry.push(creatPoint()); $. Each (pointArry, function (index) {//draw ctx.arc(this.x, this.y, this.r, 0, 2 * math.pi); ctx.fill(); })Copy the code

      • Because we listen for the resize event, we empty the array every time we initialize it
   2. Line drawing
      • Encapsulate a function called drawLine, which takes the coordinates of two points and CTX, and by Pythagorean theorem, which I think you all know, draw a line between two points

        Function drawLine(CTX, p1y, p2x, p2y) {var xDistance = math.abs (p1x-p2x); Var yDistance = math.abs (p1y-p2y); Var distance = math.sqrt (xDistance * xDistance + yDistance * yDistance); if (distance <= 120) { ctx.fillStyle = '#ffffff'; StrokeStyle = 'rgba(255,255,255,' + (1-distance / 120) + ')'; ctx.save(); ctx.beginPath(); ctx.moveTo(p1x, p1y); ctx.lineTo(p2x, p2y); ctx.stroke(); ctx.restore(); }}Copy the code

      • There’s only one judgment here, draw a line when the distance between the two points is less than or equal to 120, and the thickness of the line varies depending on the distance between the two points
      • Finally, the logic is called in the drawCanvas function: each time a point is drawn, loop over all points, and draw a line when the distance between the other points and the current point is less than or equal to 120

           $.each(pointArry, function (index) {
              if (index != i) {
                  drawLine(ctx, pointArry[i].x, pointArry[i].y, this.x, this.y);
              }
          });
        Copy the code

3. The third step is to get these things moving, which is definitely the timer, using requestAnimationFrame recursion, for reasons that need not be mentioned, performance is good

    if (window.requestAnimationFrame) timer = window.requestAnimationFrame(drawCanvas.bind(this, ctx));
        else if (window.msRequestAnimationFrame) timer = window.msRequestAnimationFrame(drawCanvas.bind(this, ctx));
        else if (window.mozRequestAnimationFrame) timer = window.mozRequestAnimationFrame(drawCanvas.bind(this, ctx));
        else if (window.webkitRequestAnimationFrame) timer = window.webkitRequestAnimationFrame(drawCanvas.bind(this, ctx));
   Copy the code

   • Don’t forget to unanimate in the resize callback.
4. The fourth step depends on the requirements, the mouse movement, the mouse near the point and the mouse line, in fact, after the above ideas, this is also easy to achieve, or take the mouse coordinates, in the cycle of drawing points, and the mouse line can be

   $canvas.on('mousemove', function (ev) { ev = ev || event; mouseX = ev.offsetX; mouseY = ev.offsetY; }); DrawLine (CTX, mouseX, mouseY, this.x, this.y); // drawLine(CTX, mouseX, mouseY, this.x, this.y); }Copy the code

   And we’re done