introduce

I saw this circular diffusion effect in ECharts, similar to CSS3, and I wanted to use it in my project, but I didn’t want to introduce the entire Echart.js file, but more importantly, I wanted to understand how it worked, so I did it myself. In this article we will analyze the two methods to achieve this effect, the first effect:

Realize the principle of

By constantly changing the radius of the circle, the effect of motion is achieved through continuous overlap. During the process of motion, the transparency context of the current canvas is set. GlobalAlpha =0.95, so that the circle on the canvas is gradually transparent until it reaches 0, thus achieving the effect of diffusion and gradual change.

Implementation Method 1

1. Key technical points context.globalAlpha = 0.95; // Set the opacity of the main canvas. Create a temporary canvas to cache the history image of the main CANas and overlay it on the main canvas.

First, let’s write a method for drawing a circle:



/ / draw circles
var drawCircle = function() {
    context.beginPath();
    context.arc(150.100, radius, 0.Math.PI * 2);
    context.closePath();
    context.lineWidth = 2; // Line width
    context.strokeStyle = 'rgba(250,250,50,1)'; / / color
    context.stroke();
    radius += 0.5; // Increase the radius by 0.5 per frame

    // If the radius is greater than 30, the radius is reset to 0
    if (radius > 30) {
        radius = 0; }};Copy the code

Then, we create a temporary canvas to cache the historical images on the main canvas, set the transparency context of the main canvas to 0.95(key step), and place the image on the main canvas before each call to drawCircle to draw a new circle. That is, the previous image is drawn to the temporary canvas, and after the drawCircle method draws a new circle, the image of the temporary canvas is drawn back to the main canvas.

The core code is as follows:



Create a temporary canvas to cache the history image of the main canvas
var backCanvas = document.createElement('canvas'),
    backCtx = backCanvas.getContext('2d');
    backCanvas.width = width;
    backCanvas.height = height;

    // Set the opacity of the main canvas
    context.globalAlpha = 0.95;

    // Displays the image to be drawn, ignoring existing images in the temporary canvas
    backCtx.globalCompositeOperation = 'copy';

var render = function() {
    1. First cache the image of the main canvas into the temporary canvas
    backCtx.drawImage(canvas, 0.0, width, height);

    //2. Clear the image on the main canvas
    context.clearRect(0.0, width, height);

    //3. Draw a new circle on the main canvas
    drawCircle();

    //4. After the new circle is drawn, draw the image of the temporary canvas back to the main canvas
    context.drawImage(backCanvas, 0.0, width, height);
};Copy the code

Implementation Method 2

Compared with the previous method, this method is simpler and also uses the principle of gradually decreasing transparency to zero. The difference is that there is no temporary canvas created here. Instead of using the context. GlobalCompositeOperation attribute value source – over and destination – in to cooperate to use, check the globalCompositeOperation properties is introduced

The core code is as follows:



var render = function() {
    // The default is source-over
    var prev = context.globalCompositeOperation;

    // Display only the overlap of the original canvas image
    context.globalCompositeOperation = 'destination-in';

    // Set the opacity of the main canvas
    context.globalAlpha = 0.95;

    // The purpose of this step is to make the canvas image transparent
    context.fillRect(0.0, width, height);

    // Superimpose the new image on the original image
    context.globalCompositeOperation = prev;

    Draw a new circle on the main canvas
    drawCircle();
};Copy the code

Applications on maps

Here I use is the second way, the diffusion, gradient effect applied to the Hundred degree map, feel still more dazzling, see more demo

Circular diffusion animation

Motion trajectory animation

conclusion

Methods 1 and 2 can achieve the same effect. If animation drawing and operation of canvas are frequent, it is recommended to adopt the first method, which uses temporary canvas to cache historical images, which is more efficient.