Canvas Imitation screen protection motion lines

Canvas is an important new label in H5, and it has to appear not only to make the front-end graphics and charting functionality become exceptionally powerful, but also to use extremely strong performance to enrich the front-end rendering of the page's ability.

Life was not a problem to being solved, but a reality to be experienced.
Life is not a problem to be solved, but a reality waiting for us to experience.

First Canvas label

<canvas id= "C1" width= "height=" "></canvas>

The width,height of the canvas label will blur if written in the Style tab.

Basic JS operation for Canvas

Define a brush
var Oc=document.getelementbyid (' C1 ');
var gd=oc.getcontext (' 2d ');

Move to coordinate point: Gd.moveto (100,100);
Connecting Wire: Gd.lineto (); Note that you just did the selection and didn't actually draw the line.
Closed constituency: Gd.closepath ();
Select color: gd.strokestyle= ' red ';
Select line width: gd.linewidth=20;
Draw the line: Gd.stroke ();
Choose the color of the fill: gd.fillstyle= ' green ';
padding: Gd.fill ();
Draw a rectangle: gd.strokerect (starting coordinates x, starting coordinates y, width, height);
After you have finished drawing one operation, you need to add it when you start the other:
Gd.beginpath ();
To end an operation, if you need to connect back to the starting point, add:
Gd.closepath ();
Clear canvas: Clearrect (x, y, width, height);

Here's a look at the Windows Line Motion screen saver with canvas, which only takes advantage of the basics of the canvas above, while the example uses an algorithm to get the maximum/least worthwhile method in an array, The idea of this method is to compare each number in sequence with the first number in the array, and if the number is greater than the first number of the number, then two digits are swapped for the position, using this method to loop the array, The first number that gets the array is the largest number in the array (this is explained in detail in the previous article on the algorithm summary);

The idea of this Windows motion line effect is that the dynamic canvas on the canvas dynamically creates 5 points and gives the 5 point movement speed, and also specifies the range of motion (the current screen window), which enables the movement of these points to change position, Connect these 5 points to create an irregular pentagon that constantly changes the style, and then record the position of the smaller dots and the connected graphs in the array, and give them the transparent color of the gradient and show them.

Here is the code, JS code, I have made clear comments when writing

<!    DOCTYPE html>
　　
Canvas Imitation screen protection motion lines