下雨加闪电效果-html代码-BFW代码库

下雨加闪电效果

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>  Raining with Lightning</title>
    <style>
        body {
            margin: 0;
            background: #000;
        }
        canvas {
            background: url('https://i.postimg.cc/6q3KG8Hw/maxresdefault.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>

</head>
<body onresize='_pexresize()'>
    <canvas id='canvas' width='1280' height='720'></canvas>


    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');


        var stgw = 1280;
        var stgh = 720;


        var loffset = 0;
        var toffset = 0;

        function _pexresize() {
            var cw = window.innerWidth;
            var ch = window.innerHeight;
            if (cw <= ch * stgw / stgh) {
                loffset = 0;
                toffset = Math.floor(ch - cw * stgh / stgw) / 2;
                canvas.style.width = cw + "px";
                canvas.style.height = Math.floor(cw * stgh / stgw) + "px";
            } else {
                loffset = Math.floor(cw - ch * stgw / stgh) / 2;
                toffset = 0;
                canvas.style.height = ch + "px";
                canvas.style.width = Math.floor(ch * stgw / stgh) + "px";
            }
            canvas.style.marginLeft = loffset + "px";
            canvas.style.marginTop = toffset + "px";
        }
        _pexresize();

        var count = 100;
        var lcount = 6;

        var layer = [];
        var layery = [];

        ctx.fillStyle = "rgba(255,255,255,0.5)";
        for (var l = 0; l < lcount; l++) {
            ctx.clearRect(0, 0, stgw, stgh.........完整代码请登录后点击上方下载按钮下载查看