canvas实现夜晚树林闪电雷电动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：canvas实现夜晚树林闪电雷电动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
        	margin:0;
        	padding:0;
        	background:#242424;
        	overflow:hidden;
        	font-family:Helvetica,Arial
        }
        canvas {
        	position:absolute;
        	top:0;
        	left:0;
        	z-index:10
        }
        .land {
        	position:absolute;
        	bottom:0;
        	width:100%;
        	height:20%;
        	background-color:#000;
        	z-index:50
        }
        .tree {
        	position:absolute;
        	z-index:50
        }
        .toggles {
        	position:absolute;
        	z-index:100;
        	left:20px;
        	bottom:20px;
        	color:#aaa;
        	display:none
        }
    </style>
</head>

<body>

    <canvas id="cloudlightning"></canvas><canvas id="lightning"></canvas><canvas id="lightningSheet"></canvas>
    <div class="land"></div>
    <div class="toggles"><label for="cloudInput"><input type="checkbox" id="cloudInput" checked="checked" />Cloud effects(disable to improve performance) </label></div>
    <div class="tree" style="display: none;"><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="911.09662" height="725.51233"><defs id="defs4" /><g transform="translate(3.1875,-18.401367)" id="layer1"><path d="M 634.26826,18.401395 L 634.14326,20.838895 C 634.0887,22.180105 633.97619,26.224645 633.89326,29.838895 L 633.76826,36.401395 L 630.08076,32.588895 C 625.81726,28.151485 625.24914,27.974325 625.26826,31.026395 C 625.27602,32.263895 627.01438,35.169905 629.11201,37.495145 C 632.47141,41.219095 632.94316,42.392615 633.14326,47.338895 C 633.29434,51.073235 633.00119,52.741315 632.29951,52.307645 C 631.71918,51.948985 631.26827,51.006435 631.26826,50.213895 C 631.26826,49.421355 630.81827,48.776395 630.26826,48.776395 C 629.71826,48.776395 629.26827,47.034055 629.26826,44.901395 C 629.26826,40.463005 626.75054,37.361285 625.17451,39.838895 C 624.6722,40.628535 624.46453,41.804405 624.70576,42.463895 C 625.23858,43.920655 622.36058,42.971055 620.42452,41.057645 C 619.69774,40.339375 618.52637,39.776395 617.79952,39.776395 C 615.09486,39.776395 615.53786,42.597365 618.83077,46.370145 C 622.74743,50.857615 622.95929,51.753435 620.36202,52.432645 C 619.08593,52.766355 618.64804,53.542545 618.98702,54.838895 C 619.54969,56.990575 622.23298,57.374195 624.04951,55.557645 C 625.41094,54.196215 625.44556,54.267765 625.67451,58.026395 C 625.8656,61.163305 625.69208,61.233625 622.26826,59.276395 C 618.91615,57.360155 618.26828,57.408125 618.26827,59.682645 C 618.26827,60.742785 619.73078,62.752225 621.51827,64.151395 C 623.95682,66.060185 624.228,66.565605 622.64326,66.151395 C 621.26358,65.790785 620.3207,66.150175 619.92452,67.182645 C 619.06359,69.426185 618.36715,69.240615 611.70577,64.901395 C 608.43647,62.771785 605.26845,61.205105 604.67452,61.432645 C 602.59275,62.230235 603.91444,66.046545 606.83077,67.651395 L 609.76827,69.245145 L 607.08077,69.557645 C 605.61482,69.732685 604.18011,70.497705 603.89327,71.245145 C 603.33226,72.707105 605.83251,74.139855 607.33077,73.213895 C 607.83114,72.904655 608.26828,73.131435 608.26827,73.713895 C 608.26827,74.296355 609.05578,74.795475 610.01827,74.838895 C 611.28907,74.896225 611.37815,75.061495 610.36202,75.463895 C 609.30191,75.883725 609.51044,76.450475 611.26827,77.776395 L 613.61202,79.526395 L 609.42452,80.245145 C 605.11629,80.973015 604.13489,82.580245 606.70577,84.713895 C 607.67459,85.517945 608.69684,85.598495 609.83077,84.963895 C 611.71679,83.908435 615.26828,84.498545 615.26827,85.870145 C 615.26827,86.355995 616.16828,86.776395 617.26827,86.776395 C 618.36827,86.776395 619.26828,86.326395 619.26827,85.776395 C 619.26827,85.226395 620.28078,84.789345 621.51827,84.807645 L 623.76826,84.838895 L 621.29952,86.870145 C 619.38156,88.466395 619.14286,89.088215 620.20577,89.745145 C 621.70683,90.672855 624.29865,89.994535 625.58076,88.338895 C 626.04465,87.739865 626.16572,88.491055 625.83076,90.026395 C 625.33116,92.316475 625.55563,92.776395 627.23701,92.776395 C 628.34749,92.776395 629.28732,92.213895 629.33076,91.526395 C 629.38463,90.673365 629.5771,90.726305 629.95576,91.682645 C 630.36078,92.705605 630.86592,92.427135 631.79951,90.682645 L 633.08076,88.276395 L 634.33076,91.026395 C 635.01806,92.534865 635.26336,94.093785 634.86201,94.495145 C 634.46066,94.896505 630.87575,95.387785 626.89326,95.588895 C 620.22956,95.925395 619.26373,95.724115 614.86202,92.932645 C 610.47926,90.153175 607.26828,89.688485 607.26827,91.838895 C 607.26827,92.312485 608.50578,93.415885 610.01827,94.276395 L 612.76827,95.838895 L 609.26827,95.182645 C 605.80622,94.549085 599.98183,91.549165 597.42452,89.057645 C 596.69774,88.349565 595.23523,87.776395 594.17452,87.776395 C 592.13671,87.776395 591.60829,89.710165 593.20577,91.307645 C 593.80575,91.907645 592.26862,92.391585 589.01827,92.588895 C 586.18773,92.760715 583.49149,93.128265 583.04952,93.401395 C 579.76141,95.433565 587.86389,99.124085 593.73702,98.276395 L 597.76827,97.713895 L 594.95577,99.307645 C 593.25285,100.27405 592.25243,101.56745 592.45577,102.58889 C 592.9425,105.03376 597.26317,104.21449 600.01827,101.15139 C 601.30039,99.725965 603.03414,98.792155 604.01827,99.026395 C 605.39829,99.354855 605.21961,99.687145 603.11202,100.55764 C 599.70673,101.96412 598.67352,103.60954 600.73702,104.40139 C 601.62849,104.74348 602.13391,105.59913 601.86202,106.30764 C 601.59014,107.01615 602.04047,107.84813 602.83077,108.15139 C 603.62104,108.45464 604.26828,108.30748 604.26827,107.83889 C 604.26827,107.02142 607.49954,105.62052 609.92452,105.37014 C 610.56245,105.30427 612.02492,104.37924 613.17452,103.33889 C 614.32408,102.29854 615.26828,101.78311 615.26827,102.18264 C 615.26827,103.22067 613.08294,105.2621 610.48702,106.65139 C 609.26087,107.3076 608.26828,108.29098 608.26827,108.83889 C 608.26827,110.7251 611.34725,111.01785 613.23702,109.30764 C 615.04123,107.67485 615.10212,107.68893 614.58077,109.68264 C 613.81773,112.60051 615.86451,112.31018 617.89327,109.21389 C 619.16228,107.27714 619.78448,106.97294 620.42452,107.96389 C 621.11944,109.03982 621.40361,109.03036 622.11201,107.93264 C 622.58626,107.19774 623.82375,106.70696 624.86201,106.83889 C 628.89693,107.35161 634.20145,103.74512 634.362.........完整代码请登录后点击上方下载按钮下载查看