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) :
Because I used jQuery, the first line of code into the head section was:
1 | <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> |
To see the result: the text and canvas I used into body section this tags:
1 2 | <canvas></canvas> <h1>free-tutorials.org</h1> |
The next step is to have a style into my html5 file, so I put this code into the head section:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <style> body { text-align:center; } canvas { position: absolute; left:0; top:0; width:100%; height:100%; } h1 { font-family: arial; font-size: 3em; margin: 0 auto; padding-top: 20%; }</style> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <!DOCTYPE html> <html lang="en"> <head> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style> body { text-align:center; } canvas { position: absolute; left:0; top:0; width:100%; height:100%; } h1 { font-family: arial; font-size: 3em; margin: 0 auto; padding-top: 20%; }</style> </head> <body> <canvas></canvas> <h1>free-tutorials.org</h1> <script>$(function () { function a() { this.x = Math.random() * c.width, this.y = Math.random() * c.height, this.vx = -.5 + Math.random() , this.vy = -.5 + Math.random(), this.radius = Math.random() } function b() { for (d.clearRect(0, 0, c.width, c.height), i = 0; i < g.nb; i++) g.array.push(new a), dot = g.array[i], dot.create(); dot.line(), dot.animate() } var c = document.querySelector("canvas"), d = c.getContext("2d"), e = "#0000FF", z = "rgba(0, 0, 255, 255)"; c.width = window.innerWidth, c.height = window.innerHeight, c.style.display = "block", d.fillStyle = z, d.lineWidth = .3, d.strokeStyle = e; var f = { x: 50 * c.width / 100, y: 50 * c.height / 100 }, g = { nb: 500, distance: 75, d_radius: 100, array: [] }; a.prototype = { create: function () { d.beginPath(), d.arc(this.x, this.y, this.radius, 0, 30* Math.PI, !1), d.fill() }, animate: function () { for (i = 0; i < g.nb; i++) { var a = g.array[i]; a.y < 0 || a.y > c.height ? (a.vx = a.vx, a.vy = -a.vy) : (a.x < 0 || a.x > c.width) && (a.vx = -a.vx, a.vy = a.vy), a.x += a.vx, a.y += a.vy } }, line: function () { for (i = 0; i < g.nb; i++) for (j = 0; j < g.nb; j++) i_dot = g.array[i], j_dot = g.array[j], i_dot.x - j_dot.x < g.distance && i_dot.y - j_dot.y < g.distance && i_dot.x - j_dot.x > -g.distance && i_dot.y - j_dot.y > -g.distance && i_dot.x - f.x < g.d_radius && i_dot.y - f.y < g.d_radius && i_dot.x - f.x > -g.d_radius && i_dot.y - f.y > -g.d_radius && (d.beginPath(), d.moveTo(i_dot.x, i_dot.y), d.lineTo(j_dot.x, j_dot.y), d.stroke(), d.closePath()) } }, $("canvas").on("mousemove mouseleave", function (a) { "mousemove" == a.type && (f.x = a.pageX, f.y = a.pageY), "mouseleave" == a.type && (f.x = c.width / 2, f.y = c.height / 2) }), setInterval(b, 1e3 / 30) });</script> </body> </html> |