Снег, отрисованный на чистом 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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
<script>(function () { if (document.createElement('canvas').getContext) { if (document.readyState === 'complete') snow(); else window.addEventListener('DOMContentLoaded', snow, false); } else { return; } var deg = Math.PI / 180; var maxflakes = 15; var flakes = []; var scrollspeed = 15; var snowspeed = 0; var canvas, sky; var snowingTimer; var invalidateMeasure = false; var strokes = ["#6cf", "#9cf", "#99f", "#ccf", "#66f", "#3cf"]; function rand(n) { return Math.floor(n * Math.random()); } // Запуск снегопада function snow() { canvas = document.createElement('canvas'); canvas.style.position = 'fixed'; canvas.style.top = '0px'; canvas.style.left = '0px'; canvas.style.zIndex = '-10'; document.body.insertBefore(canvas, document.body.firstChild); sky = canvas.getContext('2d'); ResetCanvas(); snowingTimer = setInterval(createSnowflake, 2000); setInterval(moveSnowflakes, 15); window.addEventListener('resize', ResetCanvas, false); } // Сброс размеров Canvas function ResetCanvas() { invalidateMeasure = true; canvas.width = document.body.offsetWidth; canvas.height = window.innerHeight; } // Отрисовка кривой Коха function leg(n, len) { sky.save(); // Сохраняем текущую трансформацию if (n == 0) { // Нерекурсивный случай - отрисовываем линию sky.lineTo(len, 0); } else { sky.scale(1 / 3, 1 / 3); // Уменьшаем масштаб в 3 раза leg(n - 1, len); sky.rotate(60 * deg); leg(n - 1, len); sky.rotate(-120 * deg); leg(n - 1, len); sky.rotate(60 * deg); leg(n - 1, len); } sky.restore(); // Восстанавливаем трансформацию sky.translate(len, 0); // переходим в конец ребра } // Отрисовка снежинки Коха function drawFlake(x, y, angle, len, n, stroke, fill) { sky.save(); sky.strokeStyle = stroke; sky.fillStyle = fill; sky.beginPath(); sky.translate(x, y); sky.moveTo(0, 0); sky.rotate(angle); leg(n, len); sky.rotate(-120 * deg); leg(n, len); sky.rotate(-120 * deg); leg(n, len); sky.closePath(); sky.fill(); sky.stroke(); sky.restore(); } // Создание пула снежинок function createSnowflake() { var order = 2 + rand(2); var size = 10 * order + rand(10); var x = rand(document.body.offsetWidth); var y = window.pageYOffset; var stroke = strokes[rand(strokes.length)]; flakes.push({ x: x, y: y, vx: 0, vy: 3 + rand(3), angle: 0, size: size, order: order, stroke: stroke, fill: 'transparent' }); if (flakes.length > maxflakes) clearInterval(snowingTimer); } // Перемещение снежинок function moveSnowflakes() { sky.clearRect(0, 0, canvas.width, canvas.height); var maxy = canvas.height; for (var i = 0; i < flakes.length; i++) { var flake = flakes[i]; flake.y += flake.vy; flake.x += flake.vx; if (flake.y > maxy) flake.y = 0; if (invalidateMeasure) { flake.x = rand(canvas.width); } drawFlake(flake.x, flake.y, flake.angle, flake.size, flake.order, flake.stroke, flake.fill); // Иногда меняем боковой ветер if (rand(4) == 1) flake.vx += (rand(11) - 5) / 30; if (flake.vx > 2) flake.vx = 2; if (flake.vx < -2) flake.vx = -2; if (rand(3) == 1) flake.angle = (rand(13) - 6) / 271; } if (invalidateMeasure) invalidateMeasure = false; } }()); </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
Нет демо 🙁
Спасибо, ДЕМО сделал 😉