Волосатый фон на HTML5 canvas
|
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 |
<canvas id="c" width="400" height="400"></canvas> <script> document.body.clientWidth; // webkit fix: http://qfox.nl/weblog/218 // start of submission // with(document.body.style) { padding = margin = 0; overflow = "hidden" } c = document.getElementById("c"); w = c.width = this.innerWidth; h = c.height = this.innerHeight; var g = c.getContext("2d"); l = []; function r(b) { return Math.random() * b - b / 2 } for (var i = 0; i++ < 999;) { cw = r(w); ch = r(h); l.push([cw, ch, cw + r(20), ch + r(20), cw + r(99), ch + r(99)]) } colors = [0, 255, 0]; t = 1; rd = function () { g.fillStyle = "#000"; g.fillRect(0, 0, w, h); g.strokeStyle = "#aa0"; g.lineWidth = 1; i = 5; if (colors[t] > i - 1) { colors[t] -= i; colors[(t + 1) % 3] += i } else turn = (t + 1) % 3; ss = "rgba(" + colors.join(",") + ","; g.translate(w / 2, h / 2); for (i in l) { m = l[i]; dx = x - m[0]; dy = y - m[1]; d = Math.sqrt(dx * dx + dy * dy); a = 75 / d; a = a > 0.75 ? 0.75 : a; if (!(a < 0.15)) { g.strokeStyle = ss + a + ")"; if (a > 0.6 && r(4) < -1.9) m[6] = 1; if (m[6] > 0) { m[6] -= 0.05; g.strokeStyle = "rgba(255,255,255," + m[6] + ")" } g.beginPath(); g.moveTo(m[0], m[1]); g.quadraticCurveTo(m[2] - dx / d * 20, m[3] - dx / d * 20, m[4] - dx / d * 80, m[5] - dy / d * 80); g.stroke() } } g.translate(-w / 2, -h / 2) }; document.body.onmousemove = function (b) { x = b.clientX - w / 2; y = b.clientY - h / 2; rd() }; // end of submission </script> |
