How to use ES6 class inheritance to achieve a gorgeous ball effect

How to use ES6 class inheritance to achieve a gorgeous ball effect

introduce

This effect is drawn with Canvas and then implemented using class inheritance. When the mouse moves at the specified Canvas position, a small ball of random color will be generated at the current mouse position, and then the ball will slowly disappear.

Effect diagram

Implementation steps

  • Writing HTML
  • Create a canvas environment
  • Writing Ball
  • Implement the MoveBall class that inherits the Ball class
  • Instantiate the ball

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beautiful Balls</title>
    <style>
        #canvas{
            margin-left: 100px
        }
    </style>
</head>
<body>
    <canvas id="canvas">Your browser does not support canvas</canvas>

    <!-- <script src="./underscore-min.js"></script> -->
    <!-- Underscore already has a packaged _.random function. You don't need to write a random function manually by importing it. -->
    <script src="./index.js"></script>
</body>
</html>

Create a canvas environment

 // index.js
 
 // 1. Get the current canvas const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
  
 // Set the canvas size style canvas.width = 1000;
 canvas.height = 600;
 canvas.style.backgroundColor = '#000'

Example analysis

First, find the canvas element:

const canvas = document.getElementById("myCanvas");

Then, create the context object:

const ctx = canvas.getContext('2d');

Set the width and height background color

Writing Ball

// index.js

 // 2. Ball class class Ball {
     constructor (x, y, color) {
         this.x = x; // x-axis this.y = y; // y-axis this.color = color; // color of the ball this.r = 40; // radius of the ball }
 
     // Draw the ball render () {
         ctx.save();
         ctx.beginPath();
         ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
         ctx.fillStyle = this.color;
         ctx.fill();
         ctx.restore();
     }
 }

Example analysis

  • You can see that there is a constructor() method, which is the construction method, and the this keyword represents the instance object.
  • save() ---- Save the current state of the environment
  • beginPath() ---- Start a path, or reset the current path
  • arc() ---- used to create arcs/curves (used to create circles or partial circles) -- parameters are as follows
parameter describe
x The x-coordinate of the center of the circle.
y The y coordinate of the center of the circle.
r The radius of the circle.
sAngle The starting angle, in radians (the three o'clock position of the arc circle is 0 degrees).
eAngle The ending angle, in radians.
counterclockwise Optional. Specifies whether drawing should be counterclockwise or clockwise. False = clockwise, true = counterclockwise.
  • fillStyle() ---- Sets or returns the color, gradient, or pattern used to fill a painting.
  • fill() ---- Fill the current drawing (path)
  • restore() ---- Returns the previously saved path status and properties.

Implement the MoveBall class that inherits the Ball class

// index.js

// 3. Class that moves the ball class MoveBall extends Ball { // Inherits constructor (x, y, color) {
        super(x, y, color);

        // Change in quantity // Random coordinates of the ball this.dX = Random(-5, 5);
        this.dY = Random(-5, 5);
        // Random number for decreasing radius, because the ball starts out large and then slowly disappears this.dR = Random(1, 3);
    }

    // 4. Change the position and radius of the ball upDate () {
        this.x += this.dX;
        this.y += this.dY;
        this.r -= this.dR;
        // Determine whether the radius of the ball is less than 0
        if(this.r < 0) {
            this.r = 0 // A radius of 0 means the ball disappears}
    }
}

Example analysis

  • A MoveBall class is defined here, which inherits all the properties and methods of the Ball class through the extends keyword.
  • The super keyword, which here represents the constructor of the parent class, is used to create a new this object of the parent class. The subclass must call the super method in the constructor method, otherwise an error will be reported when creating a new instance. This is because the subclass's own this object must first be shaped by the parent class's constructor to obtain the same instance properties and methods as the parent class, and then processed and added with the subclass's own instance properties and methods. If the super method is not called, the subclass will not get the this object. (Click here for details)
  • The purpose of the upDate method is to change the position and radius of the ball, and make different changes according to the position of the mouse

Instantiate the ball

// index.js

// 5. Instantiate the ball // Store the generated ball let ballArr = [];

// Define random function If you reference underscore-min.js, you don't need to write a random function, you can directly use _.random
let Random = (min, max) => {
    return Math.floor(Math.random() * (max - min) + min);
}

// Listen for mouse movement canvas.addEventListener('mousemove', function (e){
    // Random colors // You can also use a fixed color array let colorArr = ['red', 'green', 'blue', 'yellow', 'orange', 'pink'];
    // bgcolor ==> colorArr[Random(0, colorArr.length - 1)]
    let bgColor = `rgb(${Random(0,256)}, ${Random(0,256)}, ${Random(0,256)})`;
    ballArr.push(new MoveBall(e.offsetX, e.offsetY, bgColor));
    console.log(ballArr);
})

// Start the timer setInterval(function () {

    // Clear the screen ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw the ball for (let i = 0 ; i < ballArr.length; i++ ) {
        ballArr[i].render();
        ballArr[i].upDate();
    }
}, 50);

Example analysis

  • Wrote a Random function for generating random colors
  • Listen to the movement of the mouse to create a moving ball, and then push it into the array that stores the balls. In this way, the balls in the array have render and update methods. Finally, call the render method of the Ball class in turn to draw it, and call the update method of MoveBall. Now the effect comes out!
  • clearRect clearing operation----Clears the specified pixels within the given rectangle (click for details). See the picture below for the effect of not clearing the screen

We can see that the radius of the ball that does not clear the screen gradually shrinks, but the ball will not disappear in the end. This is definitely not the effect we want! What is the effect of clearing the screen? It’s the effect at the beginning of the article! (Baby, have fun❤)

index.js full code

// 1. Get the current canvas const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Set the canvas size style canvas.width = 1000;
canvas.height = 600;
canvas.style.backgroundColor = '#000'

// 2. Ball class class Ball {
    constructor (x, y, color) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.r = 40;
    }

    // Draw the ball render () {
        ctx.save();
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.restore();
    }

}

// 3. Class that moves the ball class MoveBall extends Ball { // Inherits constructor (x, y, color) {
        super(x, y, color);

        // Change in quantity // Random coordinates of the ball this.dX = Random(-5, 5);
        this.dY = Random(-5, 5);
        // Random number with smaller radius this.dR = Random(1, 3);
    }

    // 4. Change the position and radius of the ball upDate () {
        this.x += this.dX;
        this.y += this.dY;
        this.r -= this.dR;
        // Determine whether the radius of the ball is less than 0
        if(this.r < 0) {
            this.r = 0
        }
    }

}

// 5. Instantiate the ball // Store the generated ball let ballArr = [];

// Define random function If you reference underscore-min.js, you don't need to write a random function, you can directly use _.random
let Random = (min, max) => {
    return Math.floor(Math.random() * (max - min) + min);
}

// Listen for mouse movement canvas.addEventListener('mousemove', function (e){
    // Random colors // You can also use a fixed color array let colorArr = ['red', 'green', 'blue', 'yellow', 'orange', 'pink'];
    // bgcolor ==> colorArr[Random(0, colorArr.length - 1)]
    let bgColor = `rgb(${Random(0,256)}, ${Random(0,256)}, ${Random(0,256)})`;
    ballArr.push(new MoveBall(e.offsetX, e.offsetY, bgColor));
    console.log(ballArr);
})

// Start the timer setInterval(function () {

    // Clear the screen ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw the ball for (let i = 0 ; i < ballArr.length; i++ ) {
        ballArr[i].render();
        ballArr[i].upDate();
    }
}, 50);

Summarize

I hope this little demo can help you become more familiar with the understanding and use of classes in ES6. This is the end of this article on how to use ES6 class inheritance to achieve the effect of gorgeous small balls. For more relevant content about ES6 class inheritance to achieve small balls, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Analysis of concepts and usage of ES6 new features such as Class and Extends
  • Detailed example of Class inheritance usage in ES6 javascript
  • ES6 class chain inheritance, instantiation and react super (props) principle detailed explanation

<<:  Summary of Linux sftp command usage

>>:  Mysql varchar type sum example operation

Recommend

MySQL performance comprehensive optimization method reference, from CPU, file system selection to mysql.cnf parameter optimization

This article summarizes some common MySQL optimiz...

Detailed explanation of 5 solutions for CSS intermediate adaptive layout

Preface When making a page, we often encounter co...

How to deploy SpringBoot project using Dockerfile

1. Create a SpringBooot project and package it in...

MySQL 5.7.17 installation and configuration method graphic tutorial under Windows 10

In this article, I will explain in detail how to ...

Detailed explanation of custom swiper component in JavaScript

Table of contents Effect display Component Settin...

JS realizes the automatic playback effect of pictures

This article shares the specific code of JS to ac...

WeChat applet to achieve the revolving lantern effect example

Preface In daily development, we often encounter ...

Detailed explanation of FTP environment configuration solution (vsftpd)

1. Install vsftpd component Installation command:...

How to configure the OpenWRT development environment on Ubuntu 18.04 (physical machine)

1. Install a virtual machine (physical machine) Y...

Deep understanding of the mechanism of CSS background-blend-mode

This article is welcome to be shared and aggregat...

Hadoop 2.x vs 3.x 22-point comparison, Hadoop 3.x improvements over 2.x

Question Guide 1. How does Hadoop 3.x tolerate fa...

Summary of Vue component basics

Component Basics 1 Component Reuse Components are...

The difference between Update and select in MySQL for single and multiple tables, and views and temporary tables

1. Use data from table A to update the content of...

Tutorial on installing VMWare15.5 under Linux

To install VMWare under Linux, you need to downlo...

How to install Zookeeper service on Linux system

1. Create the /usr/local/services/zookeeper folde...