<canvas id="canvas"></canvas>
<div></div>
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
canvas {
margin: 0;
width: 100%;
}
div {
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%;
z-index: 999;
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.35)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.35) 0%,rgba(255,255,255,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.35) 0%,rgba(255,255,255,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.35) 0%,rgba(255,255,255,0) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,0.35) 0%,rgba(255,255,255,0) 100%);
}
var canvas, ctx;
var drawTimer, clearTimer;
var width, height;
var html = document.documentElement;
$(document).ready(function() {
canvas = document.getElementById('canvas');
width = canvas.width = html.clientWidth;
height = canvas.height = html.clientHeight;
ctx = canvas.getContext('2d');
drawTimer = window.setInterval(draw, 180);
clearTimer = window.setInterval(clear, 100);
});
function resizeCanvas() {
settlePoint = Array(html.clientWidth);
settleCanvas.width = canvas.width = html.clientWidth;
settleCanvas.height = canvas.height = html.clientHeight;
}
function draw() {
var fontSize = Math.random() * 22;
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var r = Math.floor(Math.random() * 255) + 50;
var g = Math.floor(Math.random() * 255) + 50;
var b = Math.floor(Math.random() * 255) + 50;
var color = 'rgba(' + r + ',' + g + ',' + b +',1.0)';
ctx.fillStyle = color;
ctx.font = fontSize + 'pt Arial';
ctx.fillText('*', x, y);
}
function clear() {
ctx.fillStyle = 'rgba(0,0,0,0.25)';
ctx.fillRect(0, 0, width, height);
}