Shulou(Shulou.com)06/01 Report--

Today Xiaobian to share with you how to achieve html5 circle diffusion effect related knowledge points, detailed content, clear logic, I believe most people still know too much about this knowledge, so share this article for everyone to refer to, I hope you read this article after some gains, let's learn about it together.

realization principle

By constantly changing the radius of the circle, the effect of movement is achieved by continuously overlapping. In the process of movement, set the transparency of the current canvas context.globalAlpha=0.95, so that the circle on the canvas is gradually transparent until it is 0, so as to achieve this diffusion and gradual effect.

Implementation Method 1

1. key technical points

context.globalAlpha = 0.95 ; //Sets the drawing transparency of the main canvas.

Create a temporary canvas to cache historical images of the main canvas and overlay them onto the main canvas.

2. drawing process

First, let's write a way to draw circles:

//Draw a circle

var drawCircle = function() {

context.beginPath();

context.arc(150, 100, radius, 0, Math.PI * 2);

context.closePath();

context.lineWidth = 2; //lineWidth

context.strokeStyle = 'rgba(250,250,50,1)'; //Color

context.stroke();

radius += 0.5; //radius increases by 0.5 per frame

//radius greater than 30, reset to 0

if (radius > 30) {

radius = 0;

}

};

Then, we create a temporary canvas to cache the historical images on the main canvas, set the transparency of the main canvas context.globalAlpha=0.95 (key step), draw the images on the main canvas, that is, the previous images, into the temporary canvas before calling drawCircle method to draw a new circle, and draw the temporary canvas images back into the main canvas after drawCircle method draws a new circle.

The core code is as follows:

//Create a temporary canvas to cache historical images of the main canvas

var backCanvas = document.createElement('canvas'),

backCtx = backCanvas.getContext('2d');

backCanvas.width = width;

backCanvas.height = height;

//Set the transparency of the main canvas

context.globalAlpha = 0.95;

//Display images to be drawn, ignoring images already present in temporary canvas

backCtx.globalCompositeOperation = 'copy';

var render = function() {

//1. Cache the image of the main canvas into the temporary canvas first

backCtx.drawImage(canvas, 0, 0, width, height);

//2. Clear images on 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 temporary canvas image back to the main canvas

context.drawImage(backCanvas, 0, 0, width, height);

};

Method 2

Compared with the previous method, this method is simpler. It also uses the principle of gradually decreasing transparency until it is 0. The difference is that there is no temporary canvas created here, but the context.globalCompositeOperation attribute values source-over and destination-in are used together. See the globalCompositeOperation attribute introduction.

The core code is as follows:

var render = function() {

//default is source-over

var prev = context.globalCompositeOperation;

//Show only overlapping parts of the original image on canvas

context.globalCompositeOperation = 'destination-in';

//Set the transparency of the main canvas

context.globalAlpha = 0.95;

//this step is to make the image transparent on canvas

context.fillRect(0, 0, width, height);

//Overlay new image on original image

context.globalCompositeOperation = prev;

//Draw a new circle on the main canvas

drawCircle();

};

The above is "html5 how to achieve circle diffusion effect" all the content of this article, thank you for reading! I believe everyone has a great harvest after reading this article. Xiaobian will update different knowledge for everyone every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.