<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 CANVAS 雷雨夜闪电动画</title>
<style>
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
html,
body,
canvas {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
background-color: #222;
background-image: url("https://drive.google.com/uc?export=view&id=0BzFF7FmbJUo5X0NEUXFVd0NBcWc");
background-size: cover;
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
z-index: 0;
}
body:after {
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.1);
z-index: 1;
-webkit-animation: thunder-bg 6s infinite;
animation: thunder-bg 6s infinite;
}
canvas {
display: block;
position: absolute;
top: 0;
left: 0;
}
#canvas3 {
z-index: 5;
}
#canvas2 {
z-index: 10;
}
#canvas1 {
z-index: 100;
}
@-webkit-keyframes thunder-bg {
0% {
background-color: rgba(34, 34, 34, 0.9);
}
9% {
background-color: rgba(34, 34, 34, 0.9);
}
10% {
background-color: rgba(59, 59, 59, 0.3);
}
10.5% {
background-color: rgba(34, 34, 34, 0.9);
}
80% {
background-color: rgba(34, 34, 34, 0.9);
}
82% {
background-color: rgba(59, 59, 59, 0.3);
}
83% {
background-color: rgba(34, 34, 34, 0.9);
}
83.5% {
background-color: rgba(59, 59, 59, 0.3);
}
100% {
background-color: rgba(34, 34, 34, 0.9);
}
}
</style>
</head>
<script src="js/jquery-1.11.1.min.js"></script>
<body class="thunder">
<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>
<canvas id="canvas3"></canvas>
<script>
var canvas1 = document.getElementById('canvas1');
var canvas2 = document.getElementById('canvas2');
var canvas3 = document.getElementById('canvas3');
var ctx1 = canvas1.getContext('2d');
var ctx2 = canvas2.getContext('2d');
var ctx3 = canvas3.getContext('2d');
var rainthroughnum = 500;
var speedRainTrough = 25;
var RainTrough = [];
var rainnum = 500;
var rain = [];
var lightning = [];
var lightTimeCurrent = 0;
var lightTimeTotal = 0;
var w = canvas1.width = canvas2.width = canvas3.width = window.innerWidth;
var h = canvas1.height = canvas2.height = canvas3.height = window.innerHeight;
window.addEventListener('resize', function() {
w = canvas1.width = canvas2.width = canvas3.width = window.innerWidth;
h = canvas1.height = canvas2.height = canvas3.height = window.innerHeight;
});
function random(min, max) {
return Math.random() * (max - min + 1) + min;
}
function clearcanvas1() {
ctx1.clearRect(0, 0, w, h);
}
function clearcanvas2() {
ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
}
function clearCanvas3() {
ctx3.globalCompositeOperation = 'destination-out';
ctx3.fillStyle = 'rgba(0,0,0,' + random(1, 30) / 100 + ')';
ctx3.fillRect(0, 0, w, h);
ctx3.globalCompositeOperation = 'source-over';
};
function createRainTrough() {
for (var i = 0; i < rainthroughnum; i++) {
RainTrough[i] = {
x: random(0, w),
y: random(0, h),
length: Math.floor(random(1, 830)),
opacity: Math.random() * 0.2,
xs: random(-2, 2),
ys: random(10, 20)
};
}
}
function createRain() {
for (var i = 0; i < rainnum; i++) {
rain[i] = {
x: Math.random() * w,
y: Math.random() * h,
l: Math.random() * 1,
xs: -4 + Math.random() * 4 + 2,
ys: Math.random() * 10 + 10
};
}
}
function createLightning() {
var x = random(100, w - 100);
var y = random(0, h / 4);
var createCount = random(1, 3);
for (var i = 0; i < createCount; i++) {
single = {
x: x,
y: y,
xRange: random(5, 30),
yRange: random(10, 25),
path: [{
x: x,
y: y
}],
pathLimit: random(40, 55)
};
lightning.push(single);
}
};
function drawRainTrough(i) {
ctx1.beginPath();
var grd = ctx1.createLinearGradient(0, RainTrough[i].y, 0, RainTrough[i].y + RainTrough[i].length);
grd.addColorStop(0, "rgba(255,255,255,0)");
grd.addColorStop(1, "rgba(255,255,255," + RainTrough[i].opacity + ")");
ctx1.fillStyle = grd;
ctx1.fillRect(RainTrough[i].x, RainTrough[i].y, 1, RainTrough[i].length);
ctx1.fill();
}
function drawRain(i) {
ctx2.beginPath();
ctx2.moveTo(rain[i].x, rain[i].y);
ctx2.lineTo(rain[i].x + rain[i].l * rain[i].xs, rain[i].y + rain[i].l * rain[i].ys);
ctx2.strokeStyle = 'rgba(174,194,224,0.5)';
ctx2.lineWidth = 1;
ctx2.lineCap = 'round';
ctx2.stroke();
}
function drawLightning() {
for (var i = 0; i < lightning.length; i++) {
var light = lightning[i];
light.path.push({
x: light.path[light.path.length - 1].x + (random(0, light.xRange) - (light.xRange / 2)),
y: light.path[light.path.length - 1].y + (random(0, light.yRange))
});
if (light.path.length > light.pathLimit) {
lightning.splice(i, 1);
}
ctx3.strokeStyle = 'rgba(255, 255, 255, .1)';
ctx3.lineWidth = 3;
if (random(0, 15) === 0) {
ctx3.lineWidth = 6;
}
if (random(0, 30) === 0) {
ctx3.lineWidth = 8;
}
ctx3.beginPath();
ctx3.moveTo(light.x, light.y);
for (var pc = 0; pc < light.path.length; pc++) {
ctx3.lineTo(light.path[pc].x, light.path[pc].y);
}
if (Math.floor(random(0, 30)) === 1) { //to fos apo piso
ctx3.fillStyle = 'rgba(255, 255, 255, ' + random(1, 3) / 100 + ')';
ctx3.fillRect(0, 0, w, h);
}
ctx3.lineJoin = 'miter';
ctx3.stroke();
}
};
function animateRainTrough() {
clearcanvas1();
for (var i = 0; i < rainthroughnum; i++) {
if (RainTrough[i].y >= h) {
RainTrough[i].y = h - RainTrough[i].y - RainTrough[i].length * 5;
} else {
RainTrough[i].y += speedRainTrough;
}
drawRainTrough(i);
}
}
function animateRain() {
clearcanvas2();
for (var i = 0; i < rainnum; i++) {
rain[i].x += rain[i].xs;
rain[i].y += rain[i].ys;
if (rain[i].x > w || rain[i].y > h) {
rain[i].x = Math.random() * w;
rain[i].y = -20;
}
drawRain(i);
}
}
function animateLightning() {
clearCanvas3();
lightTimeCurrent++;
if (lightTimeCurrent >= lightTimeTotal) {
createLightning();
lightTimeCurrent = 0;
lightTimeTotal = 200; //rand(100, 200)
}
drawLightning();
}
function init() {
createRainTrough();
createRain();
window.addEventListener('resize', createRainTrough);
}
init();
function animloop() {
animateRainTrough();
animateRain();
animateLightning();
requestAnimationFrame(animloop);
}
animloop();
</script>
</body>
</html>
