Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Demo effect

Address stamp here github address, welcome star

Train of thought

The whole idea is to draw many small dots on the canvas, and then start a timer to move all the dots. At the same time, monitor the mouse position. When the mouse position and the dots are smaller than a certain set value, a straight line will be used to connect them.

1. Define initial values

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

2. Define the star class

The parameters are (brush, x coordinate, y coordinate, radius) 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;
}
Copy the code

Then add the moving method to its prototype, and the above random speed value comes into play:

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

Add the render 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();
};
Copy the code

At this point, the star will display the region, and we need to judge the boundary. When we reach the boundary, we use the opposite velocity value:

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

3. Instantiate 100 stars

When there are many objects, use arrays to store them:

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

4, create mouse position star

According to the effect, there is also a star located at the vertex of the mouse, which is triggered by mouse movement events 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;
};
Copy the code

5. Start timer animation

The first step is to clear the screen, which can be understood as the animation is a collection of each frame. In the next frame, if the animation of the previous frame is not cleared, the stars will become rays happening everywhere:

/ / timer
var timer = setInterval(function () {
    / / clear screen
    ctx.clearRect(0.0, width, height);
    // Render mouse star
    mouse_star.render();

    arr.forEach(function (value, index) {
      value.move();
      // Determine the 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); }}// Determine the relationship of a star to all other stars
      if (
        Math.abs(value.x - mouse_star.x) < 150 &&
        Math.abs(value.y - mouse_star.y) < 150
      ) {
        / / the attachmentline(value.x, value.y, mouse_star.x, mouse_star.y); }}); },20);

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

6, add a mouse click effect

When the mouse is clicked, add 5 stars to the array in all directions, that is, continue to add 5 stars to the array, but with more and more clicks, it is easy to get stuck, so when creating, 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(); }};Copy the code