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>