<!DOCTYPE html>
<html>
<head>
<title>ゆき</title>
</head>
<style type="text/css" media="screen">
* {
padding: 0px;
border: 0px;
margin: 0px;
}
#c {
background-color: black;
}
</style>
<body>
<canvas id="c"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("c"),
ctx = c.getContext("2d");
var width = c.width = innerWidth;
var height = c.height = innerHeight;
var store = [];
var lin = 0;
for (var i = 0; i < height; i++) {
store.push({
x: Math.floor(Math.random() * width),
y: lin
});
lin++;
}
function draw() {
ctx.clearRect(0, 0, c.width, c.height);
for (var i = 0; i < height; i++) {
ctx.beginPath();
ctx.fillRect(store[i].x, store[i].y, 1, 1);
ctx.fillStyle = "#ffffff";
ctx.stroke();
store[i].y += 1;
if (store[i].y > c.height)
store[i].y = 0;
if (Math.floor(Math.random() > 0.5)) {
store[i].x += Math.random() * 0.5;
} else {
store[i].x -= Math.random() * 0.5;
}
}
window.requestAnimationFrame(draw);
}
draw();
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<title>このひかり</title>
</head>
<body>
<canvas id="c"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("c"),
ctx = c.getContext("2d");
c.width = innerWidth;
c.height = innerHeight;
var name =['J','o','k','i','n','g']
var lines = [],
maxSpeed = 5,
spacing = 5,
xSpacing = 0,
n = innerWidth / spacing,
colors = ["#3B8686", "#79BD9A", "#A8DBA8", "#0B486B"];
for (i = 0; i < n; i++){
xSpacing += spacing;
lines.push({
x: xSpacing,
y: Math.round(Math.random()*c.height),
width: 7,
height: Math.round(Math.random()*(innerHeight/10)),
speed: Math.random()*maxSpeed + 1,
color: colors[Math.floor(Math.random() * colors.length)]
});
}
function draw(){
var i;
ctx.clearRect(0,0,c.width,c.height);
for (i = 0; i < n; i++){
ctx.fillStyle = lines[i].color;
ctx.font="20px Georgia";
lines[i].y += lines[i].speed;
test(i);
ctx.textAlign="center";
if (lines[i].y > c.height)
lines[i].y = 0 - lines[i].height;
}
requestAnimationFrame(draw);
}
var test = (i)=>{
ctx.fillText(name[Math.floor(Math.random() * name.length)],lines[i].x, lines[i].y);
}
draw();
</script>
</html>
