HTML+CSS+JS realizes canvas follows the mouse small circle special effect source code
|
Effect (source code at the end):
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%;
<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 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:
|
<<: How to bind Docker container to external IP and port
Recommend
The implementation principle of Vue router-view and router-link
use <div id="app"> <router-lin...
6 ways to view the port numbers occupied by Linux processes
For Linux system administrators, it is crucial to...
Implementation of sharing data between Docker Volume containers
What is volume? Volume means capacity in English,...
Introduction to Docker Architecture
Docker includes three basic concepts: Image: A Do...
Detailed explanation of the use of shared memory in nginx
In the nginx process model, tasks such as traffic...
Echarts Basic Introduction: General Configuration of Bar Chart and Line Chart
1Basic steps of echarts Four Steps 1 Find the DOM...
Analysis of the problems and solutions encountered in importing large amounts of data into MySQL
In the project, we often encounter the problem of...
WeChat Mini Program User Authorization Best Practices Guide
Preface When developing WeChat applets, you often...
Two ways to manage volumes in Docker
In the previous article, I introduced the basic k...
CSS inheritance method
Given a div with the following background image: ...
30 minutes to give you a comprehensive understanding of React Hooks
Table of contents Overview 1. useState 1.1 Three ...
Detailed explanation of vite2.0 configuration learning (typescript version)
introduce You Yuxi’s original words. vite is simi...
Simple implementation of handheld barrage function + text shaking special effects code based on JS
There was a shaking barrage on TikTok a while ago...
Docker image creation, uploading, pulling and deployment operations (using Alibaba Cloud)
Since I found that the push image always timed ou...
Why is it not recommended to use index as key in react?
1. Compare the old virtual DOM with the new virtu...