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, the first line of code into the 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 the head section:

Next steps:

  • select canvas for a draw ( I used c variable );
  • make a random points ( 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 how the full source code:

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Translate »