Вращающаяся сфера на HTML5 Canvas
|
1 2 3 4 5 6 |
#sph { position: relative; overflow: hidden; width: 600px; height: 600px; } |
|
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 |
<canvas id="sph"></canvas> <script> var canvas, ctx, max, p, count; window.onload = function() { var a, b, r; canvas = document.getElementById('sph'); ctx = canvas.getContext('2d'); canvas.width = canvas.height = 400; ctx.fillRect(0, 0, 400, 400); max = 80; count = 150; p = []; r = 0; for (a = 0; a < max; a++) { p.push([Math.cos(r), Math.sin(r), 0]); r += Math.PI * 2 / max; } for (a = 0; a < max; a++) p.push([0, p[a][0], p[a][1]]); for (a = 0; a < max; a++) p.push([p[a][1], 0, p[a][0]]); rus(); }; function rus() { var a, b, c, d, e, s, tim, p2, xp, yp, xp2, yp2, x, y, z, x1, y1, z1; ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = "rgba(0,0,0,0.03)"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.globalCompositeOperation = "lighter"; tim = count / 5; for (e = 0; e < 3; e++) { tim *= 1.7; s = 1 - e / 3; a = tim / 59; yp = Math.cos(a); yp2 = Math.sin(a); a = tim / 23; xp = Math.cos(a); xp2 = Math.sin(a); p2 = []; for (a = 0; a < p.length; a++) { x = p[a][0]; y = p[a][1]; z = p[a][2]; y1 = y * yp + z * yp2; z1 = y * yp2 - z * yp; x1 = x * xp + z1 * xp2; z = x * xp2 - z1 * xp; z1 = Math.pow(2, z * s); x = x1 * z1; y = y1 * z1; p2.push([x, y, z]); } s *= 120; for (d = 0; d < 3; d++) { for (a = 0; a < max; a++) { b = p2[d * max + a]; c = p2[((a + 1) % max) + d * max]; ctx.beginPath(); ctx.strokeStyle = "hsla(" + ((a / max * 360) | 0) + ",70%,60%,0.15)"; ctx.lineWidth = Math.pow(6, b[2]); ctx.lineTo(b[0] * s + 200, b[1] * s + 200); ctx.lineTo(c[0] * s + 200, c[1] * s + 200); ctx.stroke(); } } } count++; requestAnimationFrame(rus); } </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
