thinking

The overall idea is to draw many small dots on the canvas, then start a timer to move all small dots, and monitor the mouse position at the same time. When the mouse position and the position of small dots are less than a set value, they are connected by a straight line. In this way, we can achieve a sky full star effect in the voice chat source code.

1. Define initial value

var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
var canvas = document.getElementById("myCanvas");
// Get brush
var ctx = canvas.getContext("2d"); 
// Set width and height
canvas.width = width;
canvas.height = height;
// Change fill color
ctx.fillStyle = "white";
// Change line color
ctx.strokeStyle = "rgba(255, 255, 123, .5)";
// Change line width
ctx.lineWidth = ".3";

2. Define star class

The parameters are (brush, x coordinate, y coordinate, radius) in turn, and define a random value to control the speed and direction (as follows):

function Star(ctx, x, y, r) {
    this.ctx = ctx;
    this.x = x;
    this.y = y;
    this.r = r;
    this.x_speed =
      ((parseInt(Math.random() * 3) + 1) *
        Math.pow(-1, parseInt(Math.random() * 10) + 1)) / 5;
    this.y_speed =
      ((parseInt(Math.random() * 3) + 1) *
        Math.pow(-1, parseInt(Math.random() * 10) + 1)) / 5;
}

Then add a moving method to its prototype, and the above random speed value plays a role:

Star.prototype.move = function () {
    this.x += this.x_speed;
    this.y += this.y_speed;
};

Add another rendering method:

Star.prototype.render = function () {
    this.ctx.beginPath();
    this.ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
    this.ctx.closePath();
    this.ctx.fill();
};

At this time, the star will show the display area of the voice chat source code. We need to judge the boundary. When reaching the boundary, use the opposite speed value:

Star.prototype.changeX = function () {
    this.x_speed = -this.x_speed;
};
Star.prototype.changeY = function () {
    this.y_speed = -this.y_speed;
};

3. Instantiate 100 stars

When there are many objects, use an array to store:

var arr = [];
for (var i = 0; i < 100; i++) {
    arr.push(
      new Star(ctx, Math.random() * width, Math.random() * height, 1)
    );
}

4. Create a star at the mouse position

According to the effect, another star is located at the vertex of the mouse, which is triggered by the mouse movement event to obtain the vertex position in real time:

var mouse_star = new Star(ctx, 0, 0, 2);
document.onmousemove = function (e) {
    var mouse_x = e.clientX;
    var mouse_y = e.clientY;
    mouse_star.x = mouse_x;
    mouse_star.y = mouse_y;
};

5. Turn on timer animation

The first step is to clear the screen. It can be understood that the animation is a collection of pictures of each frame. If the animation of the previous frame is not cleared during the next frame, the stars will become rays that occur everywhere:

// timer
var timer = setInterval(function () {
    // Clear screen
    ctx.clearRect(0, 0, width, height);
    // Render mouse stars
    mouse_star.render();

    arr.forEach(function (value, index) {
      value.move();
      // Judge boundary
      if (value.x < 0 || value.x > width) {
        value.changeX();
      }
      if (value.y < 0 || value.y > height) {
        value.changeY();
      }
      value.render();
    });
    arr.forEach(function (value, index) {
      for (var i = index + 1; i < arr.length; i++) {
        if (
          Math.abs(value.x - arr[i].x) < 50 &&
          Math.abs(value.y - arr[i].y) < 50
        ) {
          line(value.x, value.y, arr[i].x, arr[i].y);
        }
      }
      // Judge the relationship between stars and all other stars
      if (
        Math.abs(value.x - mouse_star.x) < 150 &&
        Math.abs(value.y - mouse_star.y) < 150
      ) {
        // Connect
        line(value.x, value.y, mouse_star.x, mouse_star.y);
      }
    });
}, 20);

// Encapsulate the function, transfer two points, and draw the line segment between the two points
function line(x1, y1, x2, y2) {
    // Open path
    ctx.beginPath();
    // Move the brush to a position
    ctx.moveTo(x1, y1);
    // Draw path
    ctx.lineTo(x2, y2);
    // Close path
    ctx.closePath();
    // Stroke 
    ctx.stroke();
}

6. Add a mouse click effect

When the mouse clicks, five stars will be emitted in all directions at the mouse position, that is, continue to add five stars to the array, but you can't just create them. With more and more clicks, they are easy to get stuck. Therefore, when creating in the voice chat source code, remove the corresponding number of stars:

document.onmousedown = function (e) {
    var mouse_x = e.clientX;
    var mouse_y = e.clientY;
    for (var i = 0; i < 5; i++) {
      arr.push(new Star(ctx, mouse_x, mouse_y, 1));
      arr.shift();
    }
};

The above is the whole content of "how to achieve a sky full star effect in the voice chat source code". It seems that it is not very simple. I hope it can be helpful to develop the voice chat source code.