HTML+CSS+JS realizes canvas follows the mouse small circle special effect source code

HTML+CSS+JS realizes canvas follows the mouse small circle special effect source code

Effect (source code at the end):

insert image description here

accomplish:

1. Define tags:

 <h1>Northern Lights Night</h1>
 <canvas id="draw" style=" position: fixed; display: block;">  
			The current browser does not support Canvas, please change the browser and try again</canvas>

2. Basic text styles:

h1{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   font-size: 5em;
   font-family: 'fangsong';
   color: rgb(38, 205, 247);
  }

top: 50%;
left: 50%;
transform: translate(-50%,-50%); center alignment
3. js part, see the comments for details:

<script>
  /* First get the canvas */
  var canvas = document.querySelector("#draw");
  var yuan = canvas.getContext("2d");  
  /* Bind the window size change event to allow the canvas to fill the browser's visible area at any time*/
   window.onresize=resizeCanvas;
  function resizeCanvas(){
   canvas.width=window.innerWidth;
   canvas.height=window.innerHeight;
  }
  resizeCanvas(); 

  /* Define an array to store the small circles generated when the move event is triggered below*/
  var arr = [];
  
  /* How to draw a small circle, x and y are the initial positions, r is the radius of the circle*/
  function circle (x,y,r){
   this.x=x;
   this.y=y;
   this.r=r;
   /* Get a random color */
   this.color = `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`
   /* The direction of the circle's movement. The random function returns a random number between 0.0 and 1.0. x can be a random positive or negative number, and y is a random positive number*/
   this.xZou = parseInt(Math.random()*10-5);
   this.yZou = parseInt(Math.random()*10);  
   /* Add this element to the end of the arr array */ 
   arr.push(this);
  }

  /* Method to update the circle */
   circle.prototype.updated = function() {
    /* x and y increase, forming a circular shape*/
   this.x = this.x + this.xZou;
   this.y = this.y + this.yZou;
   /* The radius slowly decreases*/
   this.r = this.r - 0.1 ;
   /* Clear the circle when the radius is less than 1 */
   if(this.r<0){
    this.remove();
   }
   }
   /* Delete the function of the small circle*/
   circle.prototype.remove = function (){
    /* Traverse the array, find the same circle as the one that called this function, and then use the splice function to delete it*/
   for(let i=0;i<arr.length;i++){
     if(this==arr[i])
     {
      arr.splice(i,1);
     }
   }
  }
   /* Render a small circle */
   circle.prototype.render = function(){

   yuan.beginPath();
   yuan.arc(this.x,this.y,this.r,0,2*3.14,false);
   yuan.fillStyle = this.color;
   yuan.fill();
   }
   /* Bind mouse over events to the canvas */  
   canvas.addEventListener('mousemove',function(e){
    /* Pass in x, y, r. offsetX distance from the left side, .., */
   new circle(e.offsetX,e.offsetY,Math.random()*15); 
   })

    /* Timer renders the small circle and starts the animation, once every 30 milliseconds*/
   setInterval(function(){
     /* Clear screen */
    yuan.clearRect(0,0,canvas.width,canvas.height);
    /* Loop through the array to update and render each circle*/
    for(let i=0;i<arr.length;i++){
     /* renew*/
     arr[i].updated();
     /* Render if the browser supports it */
     if (arr[i].render()) {
      arr[i].render();
     }
     
    }

   },30)

 </script>

Canvas Links
splice() Method Chaining
random() Method Chaining
push() Method Chaining
resize event link

Complete source code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
  }
  
  body{
   background-color: rgb(72, 75, 122);
  }
  
  h1{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   font-size: 5em;
   font-family: 'fangsong';
   color: rgb(38, 205, 247);
  }
  
 </style>
</head>
<body>
 
  <h1>Northern Lights Night</h1>

 <canvas id="draw" style=" position: fixed; display: block;">  
			The current browser does not support Canvas, please change the browser and try again</canvas>

 <script>
  /* First get the canvas */
  var canvas = document.querySelector("#draw");
  var yuan = canvas.getContext("2d");  
  /* Bind the window size change event to allow the canvas to fill the browser's visible area at any time*/
   window.onresize=resizeCanvas;
  function resizeCanvas(){
   canvas.width=window.innerWidth;
   canvas.height=window.innerHeight;
  }
  resizeCanvas(); 

  /* Define an array to store the small circles generated when the move event is triggered below*/
  var arr = [];
  
  /* How to draw a small circle, x and y are the initial positions, r is the radius of the circle*/
  function circle (x,y,r){
   this.x=x;
   this.y=y;
   this.r=r;
   /* Get a random color */
   this.color = `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`
   /* The direction of the circle's movement. The random function returns a random number between 0.0 and 1.0. x can be a random positive or negative number, and y is a random positive number*/
   this.xZou = parseInt(Math.random()*10-5);
   this.yZou = parseInt(Math.random()*10);  
   /* Add this element to the end of the arr array */ 
   arr.push(this);
  }

  /* Method to update the circle */
   circle.prototype.updated = function() {
    /* x and y increase, forming a circular shape*/
   this.x = this.x + this.xZou;
   this.y = this.y + this.yZou;
   /* The radius slowly decreases*/
   this.r = this.r - 0.1 ;
   /* Clear the circle when the radius is less than 1 */
   if(this.r<0){
    this.remove();
   }
   }
   /* Delete the function of the small circle*/
   circle.prototype.remove = function (){
    /* Traverse the array, find the same circle as the one that called this function, and then use the splice function to delete it*/
   for(let i=0;i<arr.length;i++){
     if(this==arr[i])
     {
      arr.splice(i,1);
     }
   }
  }
   /* Render a small circle */
   circle.prototype.render = function(){

   yuan.beginPath();
   yuan.arc(this.x,this.y,this.r,0,2*3.14,false);
   yuan.fillStyle = this.color;
   yuan.fill();
   }
   /* Bind mouse over events to the canvas */  
   canvas.addEventListener('mousemove',function(e){
    /* Pass in x, y, r. offsetX distance from the left side, .., */
   new circle(e.offsetX,e.offsetY,Math.random()*15); 
   })

    /* Timer renders the small circle and starts the animation, once every 30 milliseconds*/
   setInterval(function(){
     /* Clear screen */
    yuan.clearRect(0,0,canvas.width,canvas.height);
    /* Loop through the array to update and render each circle*/
    for(let i=0;i<arr.length;i++){
     /* renew*/
     arr[i].updated();
     /* Render if the browser supports it */
     if (arr[i].render()) {
      arr[i].render();
     }
     
    }

   },30)

 </script>
</body>
</html>

other:

Three self-examinations today: A comfortable life is boring; life full of challenges and achieving victories is the true meaning of life.

This concludes this article about the source code for the small circle special effects of canvas following the mouse using html+css+js. For more content about the small circle special effects of canvas following the mouse, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Remove HTML tags and delete HTML sample code
  • Using front-end HTML+CSS+JS to develop a simple TODOLIST function (notepad)
  • HTML5 and jQuery to implement preview code examples before uploading local pictures
  • js+html+css to achieve manual and automatic carousel
  • Two ways to use JavaScript in HTML
  • How to learn various tags of html

<<:  How to bind Docker container to external IP and port

>>:  Solution to the Mysql ERROR 1045 (28000): Access denied for user root@localhost problem in Ubuntu system

Recommend

How to use docker to deploy Django technology stack project

With the popularity and maturity of Docker, it ha...

Detailed tutorial on installing MySQL offline on CentOS7

1. Delete the original mariadb, otherwise mysql c...

How to use LibreOffice to convert document formats under CentOS

Project requirements require some preprocessing o...

Web Design TabIndex Element

TabIndex is to press the Tab key to sequentially o...

MySQL view introduction and basic operation tutorial

Preface View is a very useful database object in ...

Detailed explanation of the pitfalls of mixing MySQL order by and limit

In MySQL, we often use order by for sorting and l...

js simple and crude publish and subscribe sample code

What is Publish/Subscribe? Let me give you an exa...

The latest 36 high-quality free English fonts shared

01. Infinity Font Download 02. Banda Font Download...

Analysis of the principle of Mybatis mapper dynamic proxy

Preface Before we start explaining the principle ...

How to use IDEA to create a web project and publish it to tomcat

Table of contents Web Development 1. Overview of ...

Detailed explanation of how to use $props, $attrs and $listeners in Vue

Table of contents background 1. Document Descript...

JavaScript realizes magnifying glass special effects

The effect to be achieved: When the mouse is plac...

Detailed explanation of redundant and duplicate indexes in MySQL

MySQL allows you to create multiple indexes on th...