Анимированное звёздное небо на HTML5 Canvas и jQuery
|
1 |
<canvas id="space"></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 |
<script></script> var canvas; var context; var screenH; var screenW; var stars = []; var fps = 60; var numStars = 200; $('document').ready(function() { // Calculate the screen size screenH = $(window).height(); screenW = $(window).width(); // Get the canvas canvas = $('#space'); // Fill out the canvas canvas.attr('height', screenH); canvas.attr('width', screenW); context = canvas[0].getContext('2d'); // Create all the stars for (var i = 0; i < numStars; i++) { var x = Math.round(Math.random() * screenW); var y = Math.round(Math.random() * screenH); var length = 1 + Math.random() * 2; var opacity = Math.random(); // Create a new star and draw var star = new Star(x, y, length, opacity); // Add the the stars array stars.push(star); } setInterval(animate, 1000 / fps); }); /** * Animate the canvas */ function animate() { context.clearRect(0, 0, screenW, screenH); $.each(stars, function() { this.draw(context); }) } /** * Star * * @param int x * @param int y * @param int length * @param opacity */ function Star(x, y, length, opacity) { this.x = parseInt(x); this.y = parseInt(y); this.length = parseInt(length); this.opacity = opacity; this.factor = 1; this.increment = Math.random() * .03; } /** * Draw a star * * This function draws a start. * You need to give the contaxt as a parameter * * @param context */ Star.prototype.draw = function() { context.rotate((Math.PI * 1 / 10)); // Save the context context.save(); // move into the middle of the canvas, just to make room context.translate(this.x, this.y); // Change the opacity if (this.opacity > 1) { this.factor = -1; } else if (this.opacity <= 0) { this.factor = 1; this.x = Math.round(Math.random() * screenW); this.y = Math.round(Math.random() * screenH); } this.opacity += this.increment * this.factor; context.beginPath() for (var i = 5; i--;) { context.lineTo(0, this.length); context.translate(0, this.length); context.rotate((Math.PI * 2 / 10)); context.lineTo(0, -this.length); context.translate(0, -this.length); context.rotate(-(Math.PI * 6 / 10)); } context.lineTo(0, this.length); context.closePath(); context.fillStyle = "rgba(255, 255, 200, " + this.opacity + ")"; context.shadowBlur = 5; context.shadowColor = '#ffff33'; context.fill(); context.restore(); } </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
