Простенький снежок на 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 |
window.onload = function () { try { snow.count = 30; // number of flakes snow.delay = 20; // timer interval snow.minSpeed = 2; // minimum movement/time slice snow.maxSpeed = 5; // maximum movement/time slice snow.start(); } catch (e) { // hmmmm } }; snow = { count: 20, delay: 10, flutter: 0.2, wind: 1.0, w1: 1, minSpeed: 0.3, maxSpeed: 4, cv: null, flakes: [], toggle: function () { if (window.snowtimer) snow.stop(); else snow.start(); }, resize: function () { snow.cv.width = innerWidth; snow.cv.height = innerHeight; snow.ct.fillStyle = '#aaa'; }, start: function () { snow.cv = document.createElement('canvas'); snow.cv.width = snow.cv.height = 10; // set initial size snow.cv.id = 'backgroundSnowCanvas'; document.body.appendChild(snow.cv); snow.createFlake(); snow.ct = snow.cv.getContext('2d'), snow.cv.style.position = 'absolute'; snow.cv.style.top = 0; snow.cv.style.left = 0; snow.cv.style.zIndex = -1; snow.resize(); var c = snow.count; snow.flakes = []; do { snow.flakes.push(new snow.flake()); } while (--c); snow.ct.fillRect(0, 0, snow.cv.width, snow.cv.height); window.snowtimer = window.setInterval(snow.draw, snow.delay); window.addEventListener('resize', snow.resize); }, stop: function () { window.clearInterval(window.snowtimer); var c = document.getElementById('backgroundSnowCanvas'); c.parentNode.removeChild(c); window.snowtimer = snow = null; }, draw: function () { var ct = snow.ct, f = snow.flakes, c = snow.count; ct.fillRect(0, 0, snow.cv.width, snow.cv.height); do { if (f[--c].draw(ct) && ++fdone) {}; } while (c); snow.wind += Math.cos(snow.w1++/ 180.0); }, flake: function() { this.draw = function(ct) { ct.drawImage(snow.flakeImage,this.x + snow.wind,this.y,this.sz,this.sz); this.animate(); }; this.animate = function() { this.y += this.speed; this.x += this.flutter * Math.cos(snow.flutter * snow.flutter * this.y); if(this.y > innerHeight) this.init(1); }; this.init = function(f) { this.speed = snow.minSpeed + (Math.random() * (snow.maxSpeed - snow.minSpeed)); this.sz = ~~(Math.random() * 40) + 20; this.flutter = ~~(Math.random() * snow.flutter * (60-this.sz)); this.x = (Math.random() * (innerWidth + this.sz)) - this.sz; this.y = f ? -this.sz : Math.random() * innerHeight; }; this.init(); }, createFlake: function() { snow.flakeImage = document.createElement('canvas'); snow.flakeImage.width = snow.flakeImage.height = 40; var c = snow.flakeImage.getContext('2d'); c.fillStyle = '#fff'; c.translate(20,20); c.beginPath(); c.rect(-5,-20,10,40); c.rotate(Math.PI / 3.0); c.rect(-5, -20, 10, 40); c.rotate(Math.PI / 3.0); c.rect(-5, -20, 10, 40); c.closePath(); c.fill(); }, }; |
