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.36201,100.37014 C 634.44863,98.549605 634.54799,98.603925 635.17451,100.77639 C 635.76977,102.84038 635.27872,103.84186 632.33076,106.49514 C 630.36688,108.26271 625.98445,111.16795 622.58076,112.96389 L 616.39327,116.21389 L 611.58077,113.80764 C 608.93448,112.48596 606.20578,111.31331 605.51827,111.18264 C 603.7338,110.84349 603.97459,112.77516 606.01827,115.18264 C 607.5929,117.03755 607.58472,117.08808 606.04952,115.90139 C 605.11111,115.17602 603.96305,114.82594 603.48702,115.12014 C 603.01099,115.41434 601.36668,115.01074 599.83077,114.21389 C 596.14751,112.30299 594.99851,112.39689 595.67452,114.52639 C 596.12268,115.93818 595.65223,116.25442 593.23702,116.18264 C 591.59044,116.1337 590.0095,115.83013 589.70577,115.52639 C 588.48834,114.30897 585.26828,116.1017 585.26827,117.99514 C 585.26827,119.53215 585.75429,119.88432 587.36202,119.46389 C 589.36948,118.93893 589.38216,118.98649 587.70577,120.83889 C 585.89553,122.83918 586.19245,123.11466 589.98702,122.80764 C 591.73128,122.66651 592.09304,123.0039 591.58077,124.33889 C 591.04032,125.74727 591.38524,125.9847 593.45577,125.58889 C 595.52532,125.19327 595.88007,125.42967 595.48702,126.93264 C 594.95272,128.97581 595.58614,129.19605 598.08077,127.87014 C 600.53251,126.56702 603.62777,130.70589 601.61202,132.58889 C 600.48414,133.6425 600.14204,133.60078 599.70577,132.46389 C 599.40661,131.68429 597.63471,131.03759 595.67452,130.96389 C 593.75189,130.89162 592.40734,131.23109 592.70577,131.71389 C 593.00416,132.1967 592.36901,132.34549 591.26827,132.05764 C 588.74279,131.39721 588.66463,132.91597 591.14327,134.46389 C 592.45532,135.28328 592.86207,136.38409 592.51827,138.18264 C 591.91342,141.34675 591.76107,141.37315 588.08077,138.27639 C 586.44668,136.90139 584.45733,135.77639 583.67452,135.77639 C 581.99844,135.77639 581.91311,136.26721 583.20577,138.68264 C 584.25517,140.64346 583.59684,140.69068 576.01827,139.24514 C 573.54854,138.77406 572.26828,138.90516 572.26827,139.62014 C 572.26827,140.91482 577.46081,143.77639 579.83077,143.77639 C 581.1978,143.77639 581.278,144.0285 580.26827,145.24514 C 579.27476,146.44224 579.30984,146.85592 580.48702,147.30764 C 581.2919,147.6165 582.36744,147.77513 582.86202,147.68264 C 584.95084,147.29202 586.25178,147.85888 586.01827,149.02639 C 585.86478,149.79382 586.82993,150.24808 588.51827,150.21389 C 590.63422,150.17104 591.27393,150.63217 591.29952,152.21389 C 591.33147,154.18834 591.41053,154.16886 593.29952,151.90139 C 594.86074,150.02736 595.26828,149.88838 595.26827,151.21389 C 595.26827,152.13228 595.71722,152.61694 596.26827,152.27639 C 596.8193,151.93584 597.6963,152.82296 598.23702,154.24514 C 598.77774,155.66733 599.90378,157.08165 600.73702,157.40139 C 601.57028,157.72114 602.26828,158.60399 602.26827,159.37014 C 602.26827,160.13629 602.9914,160.77639 603.89327,160.77639 C 604.79513,160.77639 606.10107,161.53996 606.79952,162.49514 C 607.99664,164.1323 608.2184,164.11798 610.42452,162.24514 L 612.76827,160.27639 L 610.98702,162.37014 C 609.91059,163.64834 606.57565,165.10312 602.36202,166.12014 C 593.5554,168.24573 591.42814,168.17902 587.83077,165.80764 C 584.49877,163.61118 582.873,164.01821 583.76827,166.83889 C 584.27093,168.42262 583.88859,168.77639 581.51827,168.77639 C 579.9412,168.77639 578.19535,168.32845 577.64327,167.77639 C 576.97161,167.10473 575.99972,167.23647 574.70577,168.18264 C 572.84914,169.54024 572.89417,169.66621 575.98702,171.43264 C 578.31864,172.76432 579.05689,173.7759 578.64327,175.08889 C 578.27467,176.25891 578.56172,176.83158 579.42452,176.71389 C 582.31991,176.31897 583.44278,176.81316 582.89327,178.24514 C 581.93388,180.74526 585.58454,181.9377 588.36202,180.02639 C 590.18399,178.77261 590.45332,178.71309 589.54952,179.83889 C 587.86071,181.94257 589.48445,184.14161 592.11202,183.30764 C 595.89894,182.10572 596.91952,184.02841 593.20577,185.37014 C 588.43533,187.09364 583.67664,187.05979 581.89327,185.27639 C 579.92067,183.30379 576.85778,183.27956 577.61202,185.24514 C 578.07877,186.46146 577.38224,186.62405 573.70577,186.12014 C 568.3257,185.38272 567.65185,187.04526 572.61202,188.83889 C 575.01788,189.70886 575.86907,190.55455 575.54952,191.77639 C 575.01554,193.81835 578.17387,194.95334 580.61202,193.58889 C 581.93845,192.84658 582.26828,193.13613 582.26827,195.12014 C 582.26827,197.14756 582.63432,197.49453 584.42452,197.02639 C 586.19314,196.56389 586.45072,196.76121 585.89327,198.21389 C 585.34681,199.63793 585.6262,199.91636 587.237.........完整代码请登录后点击上方下载按钮下载查看