用html+css+js做canvas烟花模拟网页动画代码

圣诞节、元旦就要到了，本案例我们将用html+css+js做canvas烟花模拟网页动画代码，程序员的浪漫这不就来了嘛，与家人朋友一起看烟花吧！

附源码

<!-- App -->
<div class="container">
	<div class="loading-init">
		<div class="loading-init__header">加载中...</div>
		<div class="loading-init__status">正在准备烟花</div>
	</div>
	<div class="stage-container remove">
		<div class="canvas-container">
			<canvas id="trails-canvas"></canvas>
			<canvas id="main-canvas"></canvas>
		</div>
		<div class="controls">
			<div class="btn pause-btn">
				<svg fill="white" width="24" height="24">
					<use href="#icon-pause" xlink:href="#icon-pause"></use>
				</svg>
			</div>
			<div class="btn sound-btn">
				<svg fill="white" width="24" height="24">
					<use href="#icon-sound-off" xlink:href="#icon-sound-off"></use>
				</svg>
			</div>
			<div class="btn settings-btn">
				<svg fill="white" width="24" height="24">
					<use href="#icon-settings" xlink:href="#icon-settings"></use>
				</svg>
			</div>
		</div>
		<div class="menu hide">
			<div class="menu__inner-wrap">
				<div class="btn btn--bright close-menu-btn">
					<svg fill="white" width="24" height="24">
						<use href="#icon-close" xlink:href="#icon-close"></use>
					</svg>
				</div>
				<div class="menu__header">设置</div>
				<div class="menu__subheader">自定义属于你自己的烟花</div>
				<form>
					<div class="form-option form-option--select">
						<label class="shell-type-label">爆炸类型</label>
						<select class="shell-type"></select>
					</div>
					<div class="form-option form-option--select">
						<label class="shell-size-label">爆炸大小</label>
						<select class="shell-size"></select>
					</div>
					<div class="form-option form-option--select">
						<label class="quality-ui-label">画面质量</label>
						<select class="quality-ui"></select>
					</div>
					<div class="form-option form-option--select">
						<label class="sky-lighting-label">天空亮度</label>
						<select class="sky-lighting"></select>
					</div>
					<div class="form-option form-option--select">
						<label class="scaleFactor-label">烟花大小</label>
						<select class="scaleFactor"></select>
					</div>
					<div class="form-option form-option--checkbox">
						<label class="auto-launch-label">自动烟花</label>
						<input class="auto-launch" type="checkbox" />
					</div>
					<div class="form-option form-option--checkbox form-option--finale-mode">
						<label class="finale-mode-label">自动结束</label>
						<input class="finale-mode" type="checkbox" />
					</div>
					<div class="form-option form-option--checkbox">
						<label class="hide-controls-label">隐藏控制台</label>
						<input class="hide-controls" type="checkbox" />
					</div>
					<div class="form-option form-option--checkbox form-option--fullscreen">
						<label class="fullscreen-label">全屏模式</label>
						<input class="fullscreen" type="checkbox" />
					</div>
					<div class="form-option form-option--checkbox">
						<label class="long-exposure-label">流光快门</label>
						<input class="long-exposure" type="checkbox" />
					</div>
				</form>
				<div class="credits">
					<a href="http://www.hereitis.cn" target="_blank">在这里资源站</a>
				</div>
			</div>
		</div>
	</div>
	<div class="help-modal">
		<div class="help-modal__overlay"></div>
		<div class="help-modal__dialog">
			<div class="help-modal__header"></div>
			<div class="help-modal__body"></div>
			<button type="button" class="help-modal__close-btn">关闭</button>
		</div>
	</div>
</div>
<script src="./js/fscreen.js"></script>
<script src="./js/Stage.js"></script>
<script src="./js/MyMath.js"></script>
<script src="./js/index.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Fireworks@main/js/fscreen.js"></script>
<script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Fireworks@main/js/Stage.js"></script>
<script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Fireworks@main/js/MyMath.js"></script>
<script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Fireworks@main/js/index.js"></script> -->