hintergrund.php

Quell Code

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
       
<style>


canvas {
  height: 500px;
 
  width: 100%;
   overflow:hidden;
}
 h1{
    margin-left:30%;
    font-size:40px;
    text-decoration:underline;
    color:white;
}
 h2{
    margin-left:36%;
    font-size:30px;
    text-decoration:underline;
    color:white;
    margin-bottom:0px;
}


</style>
</head>

<h1>Canvas Hintergrund</h1>
 

<canvas id="canvas">
jacquelinclement.fr, canvas i love you.
</canvas>

 
 
 

<script>
    window.requestAnimFrame = function()
	{
		return (
			window.requestAnimationFrame       || 
			window.webkitRequestAnimationFrame || 
			window.mozRequestAnimationFrame    || 
			window.oRequestAnimationFrame      || 
			window.msRequestAnimationFrame     || 
			function(/* function */ callback){
				window.setTimeout(callback, 111000 / 60);
			}
		);
	}();

    var canvas = document.getElementById('canvas'); 
    
    var context = canvas.getContext('2d');
    
var W = window.innerWidth, H = window.innerHeight;
	canvas.width = W;
	canvas.height = H;

	var particle_count = 40,
		particles = [],
		couleurs   = ["#2ecc71", "#3498db", "#f1c40f","#e74c3c"];
    function Particle()
    {

        this.radius = Math.round((Math.random()*5)+5);
        this.x = Math.floor((Math.random() * canvas.width/2) + this.radius); 
        this.y =  Math.floor((Math.random() * canvas.height/2) + this.radius); 
        this.color = couleurs[Math.round(Math.random()*couleurs.length)];
        this.speedx = Math.round((Math.random()*201)+0)/100;
        this.speedy = Math.round((Math.random()*201)+0)/100;

        switch (Math.round(Math.random()*couleurs.length))
        {
            case 1:
            this.speedx *= 1;
            this.speedy *= 1;
            break;
            case 2:
            this.speedx *= -1;
            this.speedy *= 1;
            break;
            case 3:
            this.speedx *= 1;
            this.speedy *= -1;
            break;
            case 4:
            this.speedx *= -1;
            this.speedy *= -1;
            break;
        }
            
        this.move = function()
        {
            
            context.beginPath();
            context.globalCompositeOperation = 'source-over';
            context.fillStyle   = this.color;
            context.globalAlpha = 1;
            context.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
            context.fill();
            context.closePath();

            this.x = this.x + this.speedx;
            this.y = this.y + this.speedy;
            
            if(this.x <= 0+this.radius)
            {
                this.speedx *= -1;
            }
            if(this.x >= canvas.width-this.radius)
            {
                this.speedx *= -1;
            }
            if(this.y <= 0+this.radius)
            {
                this.speedy *= -1;
            }
            if(this.y >= canvas.height-this.radius)
            {
                this.speedy *= -1;
            }

            for (var j = 0; j < particle_count; j++)
            {
                var particleActuelle = particles[j],
                    yd = particleActuelle.y - this.y,
                    xd = particleActuelle.x - this.x,
                    d  = Math.sqrt(xd * xd + yd * yd);

                if ( d < 200 )
                {
                    context.beginPath();
                    context.globalAlpha = (200 - d) / (200 - 0);
                    context.globalCompositeOperation = 'destination-over';
                    context.lineWidth = 1;
                    context.moveTo(this.x, this.y);
                    context.lineTo(particleActuelle.x, particleActuelle.y);
                    context.strokeStyle = this.color;
                    context.lineCap = "round";
                    context.stroke();
                    context.closePath();
                }
            }
        };
    };
    for (var i = 0; i < particle_count; i++)
    {
        var particle = new Particle();
        particles.push(particle);
    }


    function animate()
    {
        context.clearRect(0, 0, canvas.width, canvas.height);
        for (var i = 0; i < particle_count; i++)
        {
            particles[i].move();
        }
        requestAnimFrame(animate);
    }
    
    

   
    animate(); 



</script>







 </div>