"use strict"; window.onload = function() { setTimeout(start, 200); }; function start() { //Helpers function lineToAngle(x1, y1, length, radians) { var x2 = x1 + length * Math.cos(radians), y2 = y1 + length * Math.sin(radians); return { x: x2, y: y2 }; } function randomRange(min, max) { return min + Math.random() * (max - min); } function degreesToRads(degrees) { return degrees / 180 * Math.PI; } //Particle var particle = { x: 0, y: 0, vx: 0, vy: 0, radius: 0, create: function(x, y, speed, direction) { var obj = Object.create(this); obj.x = x; obj.y = y; obj.vx = Math.cos(direction) * speed; obj.vy = Math.sin(direction) * speed; return obj; }, getSpeed: function() { return Math.sqrt(this.vx * this.vx + this.vy * this.vy); }, setSpeed: function(speed) { var heading = this.getHeading(); this.vx = Math.cos(heading) * speed; this.vy = Math.sin(heading) * speed; }, getHeading: function() { return Math.atan2(this.vy, this.vx); }, setHeading: function(heading) { var speed = this.getSpeed(); this.vx = Math.cos(heading) * speed; this.vy = Math.sin(heading) * speed; }, update: function() { this.x += this.vx; this.y += this.vy; } }; //Canvas and settings var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), width = canvas.width = window.innerWidth, height = canvas.height = window.innerHeight, stars = [], shootingStars = [], layers = [ { speed: 0.015, scale: 0.2, count: 320 }, { speed: 0.03, scale: 0.5, count: 50 }, { speed: 0.05, scale: 0.75, count: 30 } ], starsAngle = 145, shootingStarSpeed = { min: 15, max: 20 }, shootingStarOpacityDelta = 0.01, trailLengthDelta = 0.01, shootingStarEmittingInterval = 2000, shootingStarLifeTime = 500, maxTrailLength = 300, starBaseRadius = 2, shootingStarRadius = 3, paused = false; //Create all stars for (var j = 0; j < layers.length; j += 1) { var layer = layers[j]; for (var i = 0; i < layer.count; i += 1) { var star = particle.create(randomRange(0, width), randomRange(0, height), 0, 0); star.radius = starBaseRadius * layer.scale; star.setSpeed(layer.speed); star.setHeading(degreesToRads(starsAngle)); stars.push(star); } } function createShootingStar() { var shootingStar = particle.create(randomRange(width / 2, width), randomRange(0, height / 2), 0, 0); shootingStar.setSpeed(randomRange(shootingStarSpeed.min, shootingStarSpeed.max)); shootingStar.setHeading(degreesToRads(starsAngle)); shootingStar.radius = shootingStarRadius; shootingStar.opacity = 0; shootingStar.trailLengthDelta = 0; shootingStar.isSpawning = true; shootingStar.isDying = false; shootingStars.push(shootingStar); } function killShootingStar(shootingStar) { setTimeout(function() { shootingStar.isDying = true; }, shootingStarLifeTime); } function update() { if (!paused) { context.clearRect(0, 0, width, height); context.fillStyle = "#282a3a"; context.fillRect(0, 0, width, height); context.fill(); for (var i = 0; i < stars.length; i += 1) { var star = stars[i]; star.update(); drawStar(star); if (star.x > width) { star.x = 0; } if (star.x < 0) { star.x = width; } if (star.y > height) { star.y = 0; } if (star.y < 0) { star.y = height; } } for (i = 0; i < shootingStars.length; i += 1) { var shootingStar = shootingStars[i]; if (shootingStar.isSpawning) { shootingStar.opacity += shootingStarOpacityDelta; if (shootingStar.opacity >= 1.0) { shootingStar.isSpawning = false; killShootingStar(shootingStar); } } if (shootingStar.isDying) { shootingStar.opacity -= shootingStarOpacityDelta; if (shootingStar.opacity <= 0.0) { shootingStar.isDying = false; shootingStar.isDead = true; } } shootingStar.trailLengthDelta += trailLengthDelta; shootingStar.update(); if (shootingStar.opacity > 0.0) { drawShootingStar(shootingStar); } } //Delete dead shooting shootingStars for (i = shootingStars.length -1; i >= 0 ; i--){ if (shootingStars[i].isDead){ shootingStars.splice(i, 1); } } } requestAnimationFrame(update); } function drawStar(star) { context.fillStyle = "rgb(255, 221, 157)"; context.beginPath(); context.arc(star.x, star.y, star.radius, 0, Math.PI * 2, false); context.fill(); } function drawShootingStar(p) { var x = p.x, y = p.y, currentTrailLength = (maxTrailLength * p.trailLengthDelta), pos = lineToAngle(x, y, -currentTrailLength, p.getHeading()); context.fillStyle = "rgba(255, 255, 255, " + p.opacity + ")"; // context.beginPath(); // context.arc(x, y, p.radius, 0, Math.PI * 2, false); // context.fill(); var starLength = 5; context.beginPath(); context.moveTo(x - 1, y + 1); context.lineTo(x, y + starLength); context.lineTo(x + 1, y + 1); context.lineTo(x + starLength, y); context.lineTo(x + 1, y - 1); context.lineTo(x, y + 1); context.lineTo(x, y - starLength); context.lineTo(x - 1, y - 1); context.lineTo(x - starLength, y); context.lineTo(x - 1, y + 1); context.lineTo(x - starLength, y); context.closePath(); context.fill(); //trail context.fillStyle = "rgba(255, 221, 157, " + p.opacity + ")"; context.beginPath(); context.moveTo(x - 1, y - 1); context.lineTo(pos.x, pos.y); context.lineTo(x + 1, y + 1); context.closePath(); context.fill(); } //Run update(); //Shooting stars setInterval(function() { if (paused) return; createShootingStar(); }, shootingStarEmittingInterval); window.onfocus = function () { paused = false; }; window.onblur = function () { paused = true; }; }<html> <head> <title></title> <script type="text/javascript" src="starfield.js"></script> <style type="text/css"> html, body { margin: 0px; background: #000; height: 100%; } canvas { display: block; width: 100%; height: 100%; } </style> </head> <body> <canvas id="canvas" width="100%" height="100%"></canvas> <header> 123 </header> </body> </html>Bom como podem ver na img, qualquer coisa q eu boto dentro do header ou do body aparece no footer ou no top da page como eu faço para deixar esse animate background como fundo 100% ?
