First:
Today at 3 o ‘clock more than tea, found that there are several days without water article, but too difficult things will not ah, how to do, suddenly reminded of the computer there is a text particle effects, good guy, this is not coming, first look at the effects as follows:
Because the maximum size of GIF is 5m, but this thing is more than 5m after the demonstration, so I use the video demonstration effect.
Implementation steps (complete source code at the end) :
1. Get the canvas
// Get the canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
Copy the code2. Draw basic text
// First draw a string of text on the canvas. The size can be changed by yourself. The size of the six characters is 180px by 30px, and the background color is black
ctx.font = "30px fangsong";
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillText("Night of the Northern Lights.".0.30.180);
Copy the code3. Get the pixel position of the text, etc
// getImageData() retrieves the pixel data of the specified rectangle on the canvas and saves the pixels of the area where the text is located
var pix = ctx.getImageData(0.0.180.35);
Copy the codeGetImageData () copies the pixel data of the specified rectangle on the canvas. The getImageData() method returns an ImageData object that copies the pixel data for the specified rectangle of the canvas. For each pixel in the ImageData object, there are four sides of information, namely RGBA value: R-red (0-255) G-Green (0-255) B-blue (0-255) A-Alpha channel (0-255; 0 is transparent, 255 is fully visible) Color /alpha exists as an array and is stored in the Data property of the ImageData object.
4. Canvas dynamically ADAPTS to screen size
// The canvas dynamically adjusts to the screen size
window.addEventListener('resize',canvasResize);
function canvasResize(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
canvasResize();
Copy the code5. Set variables
// This is the approximate position of the window where the particle text will be drawn
var cx = canvas.width/2- (180*5/2);
var cy = canvas.height/2- (35*5/2);
Copy the code6. Define Particle, implement the initialization method of Particle basic information, the method of drawing Particle, and the method of updating position
// Define a Particle class
class Particle{
constructor(){
// Define an array to hold information about each particle
this.arr = [];
}
// Initialize information for each particle
init(){
// Loop, the pixel is a group of 4 data
for(let i=0; i<pix.data.length/4; i++){this.arr.push({
// The text pixel should be horizontal
x:i%180.// The text pixel should be in the vertical position
y:i/180./ / transparency
alpha:pix.data[i*4+3].// Give a random horizontal position, the particle motion mx -- x
mx:Math.random()*canvas.width,
// Given a random vertical position, the particle moves my -- y
my:Math.random()*canvas.height,
// Particle radius
radius:Math.random()*3.// Particle velocity
speed:Math.random()*40+40.// Particle random color
color:`rgba(The ${Math.random()*255}.The ${Math.random()*255}.The ${Math.random()*255}.${pix.data[i*4+3]}`}}})/ / to draw
draw(){
// Iterate through the arR array
this.arr.forEach(item= >{
// Here is how to draw each small circle
ctx.beginPath();
ctx.fillStyle = item.color;
ctx.arc(item.mx,item.my,item.radius,0.Math.PI*2.false); ctx.fill(); })}// Update the particle position
update(){
for(let i=0; i<this.arr.length; i++){// Particle motion mx -- x, my -- y, using the principle of slow animation
// Of course, if the particle moves to its original position, it will be too small, so the text size will be 30px, so change the position to x*5+cx, y*5+cy
this.arr[i].mx = this.arr[i].mx + ((this.arr[i].x*5+cx)-this.arr[i].mx)/this.arr[i].speed;
this.arr[i].my = this.arr[i].my + ((this.arr[i].y*5+cy)-this.arr[i].my)/this.arr[i].speed; }}}Copy the code7. New a Particle, then initialize
const particle = new Particle();
particle.init();
Copy the code8. Execute particle motion animation
function step(){
ctx.fillStyle = "Rgba (0,0,0,0.1)";
ctx.fillRect(0.0,canvas.width,canvas.height);
particle.draw();
particle.update();
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
Copy the codeTell the browser window. RequestAnimationFrame () – you want to perform an animation, and required the browser until the next redraw calls the specified callback function to update the animation.
9. Re-initialize window size change:
window.addEventListener('resize'.function(){
particle.arr = [];
particle.init();
cx = canvas.width/2- (180*5/2);
cy = canvas.height/2- (35*5/2);
})
Copy the codeComplete code:
<! DOCTYPEhtml>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Night of the Northern Lights.</title>
<style>* {margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(0.0.0);
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.font = "30px fangsong";
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillText("Night of the Northern Lights.".0.30.180);
var pix = ctx.getImageData(0.0.180.35);
window.addEventListener('resize',canvasResize);
function canvasResize(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
canvasResize();
var cx = canvas.width/2- (180*5/2);
var cy = canvas.height/2- (35*5/2);
class Particle{
constructor(){
this.arr = [];
}
init(){
for(let i=0; i<pix.data.length/4; i++){this.arr.push({
x:i%180.y:i/180.alpha:pix.data[i*4+3].mx:Math.random()*canvas.width,
my:Math.random()*canvas.height,
radius:Math.random()*3.speed:Math.random()*40+40.color:`rgba(The ${Math.random()*255}.The ${Math.random()*255}.The ${Math.random()*255}.${pix.data[i*4+3]}`}}})draw(){
this.arr.forEach(item= >{
ctx.beginPath();
ctx.fillStyle = item.color;
ctx.arc(item.mx,item.my,item.radius,0.Math.PI*2.false); ctx.fill(); })}update(){
for(let i=0; i<this.arr.length; i++){this.arr[i].mx = this.arr[i].mx + ((this.arr[i].x*5+cx)-this.arr[i].mx)/this.arr[i].speed;
this.arr[i].my = this.arr[i].my + ((this.arr[i].y*5+cy)-this.arr[i].my)/this.arr[i].speed; }}}const particle = new Particle();
particle.init();
window.addEventListener('resize'.function(){
particle.arr = [];
particle.init();
cx = canvas.width/2- (180*5/2);
cy = canvas.height/2- (35*5/2);
})
function step(){
ctx.fillStyle = "Rgba (0,0,0,0.1)";
ctx.fillRect(0.0,canvas.width,canvas.height);
particle.draw();
particle.update();
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
</script>
</body>
</html>
Copy the codeConclusion:
After that, we can continue to drink tea. We leave work at 7 o ‘clock
