Christoph Koschel
Mitglied
ich habe eine kleine Animation geschrieben die aber nicht ganz funktioniert meine Konsole zeigt nix an mein Fehler ist der das die Animation nicht über denn kompletten Bildschirm läuft villeicht findet ihr ja denn Fehler bzw. warum er die Animation nicht über denn kompletten Bildschirm zieht
Javascript:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #1d1f20;
width: 100%;
height: 100%;
}
canvas {
display: block;
}
</style>
<body>
<canvas id="c"></canvas>
</body>
<script>
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var binary = "01";
var font_size = 20;
var columns = c.width/font_size;
var drops = [];
c.height = window.innerHeight;
c.width = window.innerWidth;
binary = binary.split("");
for (var x=0;x < columns; x++)
drops[x]=1
function draw() {
ctx.fillStyle = "rgba(0,0,0,0.05)";
ctx.fillRect(0,0, c.width, c.height);
ctx.fillStyle = "red";
ctx.font = font_size + "px arial";
for (i = 0;i < drops.length; i++) {
var text = binary[Math.floor(Math.random()*binary.length)];
ctx.fillText(text,i*font_size, drops[i]*font_size);
if (drops[i]*font_size > c.height && Math.random() > 0.957)
drops[i]=0;
drops[i]++;
}
}
setInterval(draw,50);
</script>
</html>
