hintergrund.php

Quell Code

<link rel="stylesheet" type="text/css" 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>
 
 
textarea{
    width:70%;
 
    margin-left:10%;
    overflow:auto;
        display: inline-block;
    min-height: 100px;
}
 
  
#alles{
    background: radial-gradient(circle at center, transparent, #000 95%), linear-gradient(#444 2px, transparent 0) 0 0/20px 20px, linear-gradient(90deg, #444 2px, #000 0) 0 0/20px 20px;
  margin: 0;
  overflow: auto;
 height:100%;
 width:100%;
}
 
 
 p{
    color:white;
  text-align:center;
  margin-left:0%;
}
.code1{height:auto;}
.code2{height:auto;}
.code3{height:auto;}
.code4{height:auto;}
.infocode1{color:red;}
.infocode2{color:red;}
.infocode3{color:red;}
.infocode4{color:red;}
.infocode5{color:red;}
 
canvas {
  height: 100%;
 
  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>
  <div id="alles">
<h1>Canvas Hintergrund</h1>
 

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

<h2>Html</h2>
<textarea onclick="this.focus();this.select();" class="code code1" id="html" data-code="Sie haben den  Html Code in der Zwischenablage Kopiert">
<canvas id="canvas">
jacquelinclement.fr, canvas i love you.
</canvas></textarea>
<p class="infocode infocode2">  </p>
 
<h2>Css</h2>
<textarea  onclick="this.focus();this.select();" class="code code2" id="css" data-code="Sie haben den Css Code in der Zwischenablage Kopiert">
 #canvas{
     background:#222;
     
 }
html{
    margin:0;
    padding:0;
    background:#222;
    
}
</textarea>
 
<h2>Javascript</h2>
<textarea  onclick="this.focus();this.select();" class="code code3" id="java" data-code="Sie haben den  Javascript Code in der Zwischenablage Kopiert"> 
    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(); 

</textarea>
 

<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>







<h2>Was muß eingebunden werden</h2>
<textarea  onclick="this.focus();this.select();" class="code code4" id="wasnoch" data-code="Sie haben die einzubindene Links  in der Zwischenablage Kopiert">   
 https://code.jquery.com/jquery-3.2.1.min.js
</textarea> 
 </div>
 
 
 
 
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-122955144-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-122955144-1');
</script>