LinkedInTwitterFacebook

Random lines with jQuery.

This is a complex tutorial about HTML5, jQuery and javascript.
The result of this tutorial will be a text and one canvas with random animated lines.
The result is this animated line into html5 file (also you can see my codepen example) :
free-tutorials
Because I used jQuery , first line of code into head section was:

To see the result: the text and canvas I used into body section this tags:

The next step is to have a style into my html5 file, so I put this code into head section:

Next steps:

  • select canvas for draw ( I used c variable );
  • make a random points into canvas ( I used a function);
  • make points and lines ( I used b function);
  • make create, animate and line function object as a combination of a prototype;

JavaScript allows you to use a Function object as a combination of a prototype to use for the new object and a constructor function to invoke.
The event.pageX property returns the position of the mouse pointer, relative to the left edge of the document.
Let’s see now the full source code: