Use canvas to create a cool particle background, and canvas cool

Use canvas to create a cool particle background, and canvas cool

You can use canvas to create a cool particle background. Of course, there are still some libraries available. This time we write this background. The main thing is JS. canvas only has no effect on the canvas itself. It is just an interface, JS is still required.
Canvas label description:
This HTML element is designed for vector graphics on the client side. It does not act on its own, but presents a drawing API to the client JavaScript so that the script can draw everything you want to draw on a canvas.
The canvas tag is introduced by Apple in the Safari 1.3 Web browser. The root extension of HTML is that HTML's drawing capability in Safari is also used by the Dashboard component on Mac OS X desktop, in addition, Apple wants to support scripted graphics in the Dashboard.
Both Firefox 1.5 and Opera 9 follow the guidance of Safari. Both browsers support the canvas tag.
This is a new html5 label, that is, IE678 direct GG, so it is mainly used in modern browsers, but there are very few people using IE678.
What should we do?
First, we need to write the canvas label in the page (add some inline styles, relatively lazy --)

<canvas id="canvas" style="position:absolute;width:100%;height:100%;background:#000;"></canvas>

The next step is to focus on JS.

Window. requestAnimFrame = (function () {return window. requestAnimationFrame | window. webkitRequestAnimationFrame | window. required requestanimationframe | function (callback) {window. setTimeout (callback, 1000/60) ;}}(); var can = document. getElementById ("canvas"); var cxt = can. getContext ("2d"); can. width = 1920; can. height = 950; cxt. lineWidth = 0.3; // the position where the initial link line is displayed. var mousePosition = {x: 30 * can. width/100, y: 30 * can. height/100} // circular particle object parameter var dots = {n: 500, // Number of circular particles distance: 50, // The distance between circular particles d_radius: 100, // The distance from the particle to the mouse point array: [] // save n circular particle objects} // create the color value function colorValue (min) {return Math. floor (Math. random () * 255 + min);} function createColorStyle (r, g, B) {return "rgba (" + r + "," + g + ", "+ B +", 1) ";}// mixed color function mixConnect (c1, r1, c2, r2) of two circular Particles) {// return (c1 * r1 + c2 * r2)/(r1 + r2) ;}; // function lineColor (dot1, dot2) of the generated line) {// obtain the color of a specific circle and calculate var color1 = dot1.color, color2 = dot2.color; var r = mixConnect (color1.r, dot1.radius, color2.r, dot2.radius ); var g = mixConnect (color1.g, dot1.radius, color2.g, dot2.radius); var B = mixConnect (color1. B, dot1.radius, color2. B, dot2.radius); return createColorStyle (Math. floor (r), Math. floor (g), Math. floor (B);} // Color object for generating circular particles function Color (min) {min = min | 0; this. r = colorValue (min); this. g = colorValue (min); this. B = colorValue (min); this. style = createColorStyle (this. r, this. g, this. b);} // create a circular particle object function Dot () {// this. x = Math. random () * can. width; this. y = Math. random () * can. height; // The speed value of x y direction movement this. vx =-0.5 + Math. random (); this. vy =-0.5 + Math. random (); this. radius = Math. random () * 5; // this. color = "# ff3333"; this. color = new Color ();} // draw a circular particle Dot. prototype. draw = function () {cxt. beginPath (); cxt. fillStyle = this. color. style; cxt. arc (this. x, this. y, this. radius, 0, Math. PI * 2, false); cxt. fill ();} // Add the circular particle function createCircle () {for (var I = 0; I <dots. n; I ++) {dots. array. push (new Dot () ;}// draw the circular particle function drawDots () {for (var I = 0; I <dots. n; I ++) {var dot = dots. array [I]; dot. draw () ;}/// drawDots (); // mobile function moveDots () {for (var I = 0; I <dots. n; I ++) {var dot = dots. array [I]; // returns if (dot. y <0 | dot. y> can. height) {dot. vx = dot. vx; dot. vy =-dot. vy;} else if (dot. x <0 | dot. x> can. width) {dot. vx =-dot. vx; dot. vy = dot. vy;} // Add the velocity value to the Circle particle Center Coordinate to move the circular particle dot. x + = dot. vx; dot. y + = dot. vy ;}// link to the particle object function connectDots () {for (var I = 0; I <dots. n; I ++) {for (var j = 0; j <dots. n; j ++) {iDot = dots. array [I]; jDot = dots. array [j]; if (iDot. x-jDot. x) <dots. distance & (iDot. y-jDot. y) <dots. distance & (iDot. x-jDot. x)>-dots. distance & (iDot. y-jDot. y)>-dots. distance) {if (iDot. x-mousePosition. x) <dots. d_radius & (iDot. y-mousePosition. y) <dots. d_radius & (iDot. x-mousePosition. x)>-dots. d_radius & (iDot. y-mousePosition. y)>-dots. d_radius) {cxt. beginPath (); // cxt. strokeStyle = "yellow"; cxt. strokeStyle = lineColor (iDot, jDot); cxt. moveTo (iDot. x, iDot. y); cxt. lineTo (jDot. x, jDot. y); cxt. closePath (); cxt. stroke () ;}}}} createCircle (); // enables circular particles to constantly move function animateDots () {cxt. clearRect (0, 0, can. width, can. height); moveDots (); connectDots () drawDots (); requestAnimFrame (animateDots);} animateDots (); can. onmousemove = function (ev) {var ev = ev | window. event; mousePosition. x = ev. pageX; mousePosition. y = ev. pageY;} can. onmouseout = function () {mousePosition. x = can. width/2; mousePosition. y = can. height/2 ;}

There are a lot of JS code. You can encapsulate it when you use it again. Just introduce the JS file directly.

Refer to the online experts, but do not remember the specific sources. If there is any infringement, contact the bloggers to delete it ~