Радужная аномалия на HTML5 Canvas
|
1 |
<canvas id="main"></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 |
<script> (function() { var canvas, context, width, height; var particles = []; function render(callback) {} function init() { canvas = document.getElementById('main'); context = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; context.globalCompositeOperation = 'lighten'; drawCanvas(); for (var i = 0; i < 30; i++) { generateParticle(); } draw(); } function drawCanvas() { context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = 'hsla(332, 95%, 5%, 1)'; context.fillRect(0, 0, canvas.width, canvas.height); } function draw() { drawCanvas(); for (var i = 0; i < particles.length; i++) { if (particles[i].dead) particles.splice(i, 1); context.globalCompositeOperation = "lighter" context.beginPath(); var gradient = context.createRadialGradient(particles[i].x, particles[i].y, 0, particles[i].x, particles[i].y, particles[i].size); gradient.addColorStop(1, 'transparent'); gradient.addColorStop(0, particles[i].color); context.fillStyle = gradient; context.arc(particles[i].x, particles[i].y, particles[i].size, 0, Math.PI * 2, true); context.closePath(); context.fill(); //Do gravity stuff. particles[i].x += particles[i].Hvelocity; particles[i].y += particles[i].Vvelocity; if (particles[i].x - particles[i].size > canvas.width || particles[i].y - particles[i].size > canvas.height) particles[i].dead = true; } if (particles.length < 300) for (var i = 0; i < 10; i++) generateParticle(); requestAnimationFrame(draw); } function generateParticle() { var colors = ['rgba(142, 68, 173,0.3)', 'rgba(41, 128, 185, 0.3)', ] var color = Math.floor(Math.random() * colors.length) + 0; var particle = { x: Math.floor(Math.random() * -100) + 0, y: Math.floor(Math.random() * -100) + 0, size: Math.floor(Math.random() * 150) + 30, color: colors[color], Hvelocity: Math.floor(Math.random() * 10) + 1, Vvelocity: Math.floor(Math.random() * 10) + 1, dead: false } particles.push(particle); } setTimeout(function() { init(); }, 500); })(); </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
А как его фоном для body сделать?)
Вставить в начало страницы с position fixed и z-index минимальным. Если размеры поставятся 100%х100%, то будет выглядеть как фон
так оно поверх всего сайта становится
canvas#main {z-index:-100;}
#content {z-index:1000;}
Как-то так должно сделаться правильно