Canvas particle text


I saw it by accidentI’m still hereOfA little canvas every dayThe “particle text” section feels very good. I have studied it, because the original author has added several attributes to interact with the user, which can dynamically change the style of particle text animation, and the code is also relatively complete and scattered. For learners, I feel that it is very difficult to understand and learn. So here I sort out the core code. I hope that students interested in this can have a look. I just pull out the core code and put it in a file, which is convenient to understand and view; Then I added some notes to the key part. My own understanding, if there is something wrong or inappropriate, you must point out it. First look at the effect picture (the picture is also copied from the great God [I’m still here], forgive me). I have removed the function of the slide tab on the left in the figure to facilitate the understanding of the core of particle animation

Canvas particle text

The source code is as follows:

<!DOCTYPE html>
<html lang="len">
    <meta charset="utf-8"/>
    < title > text particles
    <canvas id="canvas" width="1200" height="500" style="background: #ccc"></canvas>

    <script type="text/javascript">
        window.onload = function(){
            var canvas = document.getElementById("canvas")
            var context = canvas.getContext("2d");
            var W = canvas.width = window.innerWidth,
                H = canvas.height = window.innerHeight,
                gridX = 7,
                gridY = 7,
                colors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
                          '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
                          '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
                durVal = 0.1;

            function Particle(x, y){
                this.x = x;
                this.y = y;
                this.color = colors[Math.floor(Math.random() * colors.length)];
                this.futurRadius = randomInt(1.1, 5.1);
                this.radius = 1.1;
                this.dying = false;
                this.base = [x, y];

                this.drawParticle = function(){

                    //After the current particle becomes smaller to a certain extent, its radius will be + 0.1 each time to make it larger slowly
                    if(this.radius < this.futurRadius && this.dying === false){
                        this.radius += durVal;
                    }Else {// the particle has reached the maximum state
                        this.dying = true; // Indicates that the particle is still in the show state

                    //- 0.1 per time
                        this.radius -= durVal;

                    context.fillStyle = this.color;
                    context.arc(this.x, this.y, this.radius, Math.PI * 2, false);

                    //Reset the disappeared particles to their original state
                    if (this.y < 0 || this.radius < 1) {
                      this.x = this.base[0];
                      this.y = this.base[1];
                      this.dying = false;

            //Text object
            function Shape(text, size, x, y){
                this.text = text;
                this.size = size;
                this.x = x;
                this.y = y;
                this.placement = []; // Location information of text data
            Shape.prototype.getValue = function(){
                context.textAlign = "center";
                context.font = this.size+"px arial";
                context.fillText(this.text, this.x, this.y);

                //Copies the pixel data of the specified rectangle on the canvas
                var idata = context.getImageData(0, 0, W, H);
                //The data property returns an object that is an 8-bit array of unsigned integers, uint8clampedarray
                var buffer = new Uint32Array(;

                //Sampling image data, using particle object to record the position information of the data under the current pixel
                for(var i = 0; i < H; i += gridY){
                    for(var j = 0; j < W; j += gridX){
                        if(buffer[i * W + j]){
                            var particle = new Particle(j, i);

            //Creating model data objects
            var word = new Shape("`(*∩_∩*)′", 200, W/2, H/2);
                //Call getValue method to get data location information

            (function drawFrame(){
                context.clearRect(0, 0, W, H);

                for (var i = 0; i < word.placement.length; i++){
                    //Call the drawparticle method of the particle object to start painting on the canvas


            function randomInt(min, max) {
               return min + Math.random() * (max - min + 1);

Recommended Today

Implementation example of go operation etcd

etcdIt is an open-source, distributed key value pair data storage system, which provides shared configuration, service registration and discovery. This paper mainly introduces the installation and use of etcd. Etcdetcd introduction etcdIt is an open source and highly available distributed key value storage system developed with go language, which can be used to configure sharing […]