Великолепный объёмный снег на HTML5 canvas
|
1 2 3 4 5 6 |
#cvs { position: fixed; top:0px; left:0px; z-index:-1; } |
|
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 |
<canvas id="cvs" height="500" width="1920"></canvas> <script> /************* SHIM ************************/ window.requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; })(); /********************************************/ var canvas = document.getElementById('cvs'), ctx = canvas.getContext('2d'), height = canvas.height = document.body.offsetHeight, width = canvas.width = document.body.offsetWidth, collection = [], num_drops = 500, // количество снежинок gravity = 1, // скорость падения windforce = 5, // хрень какая-то windmultiplier = 5, // тож непонятная переменная maxspeed = 3, // максимальная скорость движения снежинки gutter = 0; // процент расстояния от низа экрана, где снежинки тают function Drop() { this.x; this.y; this.radius; this.distance; this.color; this.speed; this.vx; this.vy; } Drop.prototype = { constructor: Drop, random_x: function () { var n = width * (1 + gutter); return (1 - (1 + gutter)) + (Math.random() * n); }, draw: function (ctx) { ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); ctx.closePath(); ctx.fill(); } }; function draw_frame() { // this was recommended (see comments) // check it out, just comment out the // ctx.clearRect(0, 0, width, height); // line and uncomment the three below: //ctx.globalCompositeOperation="darker"; //ctx.fillStyle="rgba(0,0,0,0.5)"; //ctx.fillRect(0,0,width,height); ctx.clearRect(0, 0, width, height); // in a previous attempt I even go as far // as to ensure i'm drawing the furthest particles // first for the z-index overlay. // in this run I felt it was unneeded collection.forEach(function (drop) { // costly but ultimatly I think it's worth it for now // I muck with the opacity to help with the illusion of depth ctx.globalAlpha = (drop.distance + 1) / 10; drop.draw(ctx); ctx.globalAlpha = 1; drop.x += drop.vx; drop.y += drop.vy; var lx = drop.vx + windforce; lx < maxspeed && lx > 1 - maxspeed && (drop.vx = lx); if (drop.y > (drop.distance + 1) / 10 * height) { drop.y = Math.random() * -drop.radius * (num_drops / 10); drop.x = drop.random_x(); } if (drop.x > width * (1 + gutter)) { drop.x = 1 - (width * gutter); } if (drop.x < 1 - (width * gutter)) { drop.x = width * (1 + gutter); } }); } function animate() { requestAnimFrame(animate); draw_frame(); } function windtimer() { // this is a super cheap way to do this, // i will need to look into how to properly // emulate wind windforce = Math.random() > 0.5 ? windmultiplier : -windmultiplier; setTimeout(windtimer, Math.random() * (1000 * 30)); } function init() { collection = []; while (num_drops--) { var drop = new Drop(); // todo: make constructor do this shit drop.color = "#eee"; drop.distance = Math.random() * 10 | 0; drop.speed = Math.random() * (drop.distance / 10) + gravity; drop.vx = 0; drop.vy = Math.random() * drop.speed + (drop.speed / 2); drop.radius = (drop.distance + 1) / 16 * 3; drop.x = drop.random_x(); drop.y = Math.random() * height; collection.push(drop); } windtimer(); animate(); window.onresize = function () { height = canvas.height = document.body.offsetHeight; width = canvas.width = document.body.offsetWidth; }; } init(); </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
Поставил к себе:))
А не рановато? Октябрь вроде ещё на планете 😀
А можно таким же кодом сделать эффект например падающих листьев?
Так то можно, но моих знаний для переписывания такого кода не хватит