Огненная звезда у курсора на 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 |
<canvas id="canv"></canvas> <script> var c = document.getElementById('canv'), $ = c.getContext('2d'); c.width = window.innerWidth; c.height = window.innerHeight; var msX = window.innerWidth / 2, msY = window.innerHeight / 2, arr = [], num = 25; anim(); var cnt = 0; function anim() { window.requestAnimationFrame(anim); if (cnt % 2 == 0) draw(1); cnt++; $.fillStyle = 'hsla(21, 95%, 5%, 1)'; $.fillRect(0, 0, c.width, c.height); for (i = 0; i < arr.length; i++) { var a = arr[i]; a.disp($); a.upd(); } while (arr.length > num) arr.shift(); } function draw(_cnt) { for (var i = 0; i < _cnt; i++) { var a = new _img(img, msX, msY); a.vx = rnd(-0.1, 0.1); a.vy = 0; a.sz = rnd(0.1, 0.2); a.max = 1; a.alpha = 1; a.grav = -0.5; a.drag = 0.96; a.min = 1.1; a.fade = 0.04; a.rot = rnd(0, 360); a.spin = rnd(-1, 2); a.compositeOperation = 'lighter'; arr.push(a); } } function _img(img, px, py) { this._px = px; this._py = py; this.vx = 0; this.vy = 0; this.min = 1; this.sz = 1; this.max = -1; this.shim = false; this.drag = 1; this.grav = 0; this.alpha = 1; this.fade = 0; this.spin = 0; this.rot = 0; this.compositeOperation = 'source-over'; this.img = img; this.upd = function() { this.vx *= this.drag; this.vy *= this.drag; this.vy += this.grav; this._px += this.vx; this._py += this.vy; this.sz *= this.min; if ((this.max > 0) && (this.sz > this.max)) this.sz = this.max; this.alpha -= this.fade; if (this.alpha < 0) this.alpha = 0; this.rot += this.spin; }; this.disp = function($$) { if (this.alpha == 0) return; $$.save(); $$.translate(this._px, this._py); var s = this.shim ? this.sz * Math.random() : this.sz; $$.scale(s, s); $$.rotate(this.rot * (Math.PI / 90)); $$.translate(img.width * -0.5, img.width * -0.5); $$.globalAlpha = this.alpha; $$.globalCompositeOperation = this.compositeOperation; $$.drawImage(img, 0, 0); $$.restore(); }; } img = new Image(); img.src = '/img/firestar.png'; function rnd(min, max) { return ((Math.random() * (max - min)) + min); } window.addEventListener('mousemove', function(e) { e.preventDefault(); msX = e.clientX; msY = e.clientY; }, false); window.addEventListener('touchmove', function(e) { e.preventDefault(); msX = e.touches[0].clientX; msY = e.touches[0].clientY; }, false); window.addEventListener('resize', function() { c.width = window.innerWidth; c.height = window.innerHeight; }, false); </script> |
