I haven't written a blog post for a long time. Today I took the time to make a simple particle effect of canvas
The basic knowledge required is the object-oriented foundation of js,
Drawing basics of canvas
First preview the effect, click me to enter
What we need here is to define the object of the particle effect and the particle base point object,
The basic structure of the object is constructed by analyzing the object relationship, and a simple particle effect is obtained.
The complete code is directly below,
Comments have been added to the code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Particle Effects</title>
<style type="text/css">
body{
background: #000000;
}
</style>
</head>
<body>
<canvas id="c" width="1280" height="800"></canvas>
<script type="text/javascript">
(function(){
var c = document.querySelector("#c");
var ctx = c.getContext("2d");
// base point exchange object
function Circle(color,count){
this.x=0;//The x coordinate of the base point
this.y=0;//y coordinate of the base point
this.r = 25;//Radius of base point
this.color = color;//The color of the base point
this.shadowCount = count;//Number of particles emitted by the base point
this.shadows = [];//The collection of particle objects emitted by the base point
// method to initialize particles
this._circle = function(){
for(var i=0;i<this.shadowCount;i++){
this.shadows.push(new Shadow());
}
}
this._circle();
}
// base point object rendering method
Circle.prototype.rounder = function(x,y){
this.x = x;
this.y = y;
for(var i=0;i<this.shadows.length;i++){
this.shadows[i].initShadow(this);
}
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
ctx.fill();
}
// particle object
function Shadow(obj){
this.jg = Math.random()*30;//Interval of rendering particles
this.x = -1000;//The x coordinate of the particle
this.y = -1000;//The y coordinate of the particle
this.r = -1000;//The radius of the particle
var R = parseInt(Math.random()*256);//The random number of the color
var G = parseInt(Math.random()*256);//The random number of the color
var B = parseInt(Math.random()*256);//The random number of the color
this.color = "rgb("+R+","+G+","+B+")";//粒子颜色
this.fadeR = 300;//Disappearance distance of particles
//The radian value of the angle at which the particle moves
var jd = Math.PI/180*(parseInt(Math.random()*360))
// Calculate the velocity of the particle in the x and y directions according to the particle angle
this.sx = Math.sin(jd)*this.fadeR/100;
this.sy = Math.cos(jd)*this.fadeR/100;
}
//Particle object rendering method
Shadow.prototype.initShadow=function(obj){
//Since each particle object is drawn at the same time, define random intervals to achieve the time difference effect
if(this.jg<0){
//When the data is initialized, the shadow will not be reassigned
if(this.x==-1000){
this.x = obj.x;
}
if(this.y==-1000){
this.y = obj.y;
}
if(this.r==-1000){
this.r = obj.r;
}
// only render shadows if the object's radius is positive
if(this.r>0){
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
this.x+=this.sx;
this.y+=this.sy;
this.r-=this.fadeR/300;
ctx.fill();
}else{
//When the radius is invalid, the initialization method is called to let the particles reappear to realize the irregular state cycle of a single object
this.init();
}
}else{
this.jg--;
}
}
//Reinitialize after the particle ends
Shadow.prototype.init = function(){
this.jg = Math.random()*30;
this.x = -1000;
this.y = -1000;
this.r = -1000;
var R = parseInt(Math.random()*256);
var G = parseInt(Math.random()*256);
var B = parseInt(Math.random()*256);
this.color = "rgb("+R+","+G+","+B+")";
this.fadeR = 300;
var jd = Math.PI/180*(parseInt(Math.random()*360))
this.sx = Math.sin(jd)*this.fadeR/100;
this.sy = Math.cos(jd)*this.fadeR/100;
}
//Instantiate the body object
var c1 = new Circle("rgba(100,230,140,0.5)",100);
var x = 0;
var y = 0;
// animation start method
function startFill(){
ctx.clearRect(0,0,c.width,c.height)
c1.rounder(x,y);
}
//mouse tracking method
c.addEventListener("mousemove",function(e){
x = e.offsetX;
y = e.offsetY;
});
// start the timer
window.setInterval(startFill,17);
})();
</script>
</body>
</html>
Interested can study canvas can achieve any visual effect you want to achieve in the web environment