原生js实现雷雨交加的效果
代码语言:html
所属分类:动画
代码描述:原生js实现雷雨交加的效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
}
canvas {
display: block;
position: absolute;
top: 0;
left: 0;
}
canvas#canvasThunder {
z-index: 1;
background: #131041;
}
canvas#canvasCloud {
z-index: 2;
}
canvas#canvasRain {
z-index: 3;
}
</style>
</head>
<body translate="no">
<canvas id="canvasThunder">Canvas not supported.</canvas>
<canvas id="canvasCloud">Canvas not supported.</canvas>
<canvas id="canvasRain">Canvas not supported.</canvas>
<script >
(function () {
'use strict';
window.addEventListener('load', function () {
var canvasThunder = document.getElementById('canvasThunder');
var canvasCloud = document.getElementById('canvasCloud');
var canvasRain = document.getElementById('canvasRain');
if (!canvasThunder || !canvasThunder.getContext) {
return false;
}
/********************
Random Number
********************/
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
/********************
Var
********************/
var canvasThunderCtx = canvasThunder.getContext('2d');
var canvasC.........完整代码请登录后点击上方下载按钮下载查看
网友评论0