关注微信公众号「ClassmateJie」有完整代码以及更多惊喜等待你的发现。
简介/效果展示
这段代码是一个HTML页面，其中包含一个canvas元素和相关的JavaScript代码。这个页面创建了一个飘落花瓣的动画效果。
代码【获取完整代码关注微信公众号「ClassmateJie」回复“樱花”】
<!DOCTYPE HTML>
<HTML>
<TITLE>飘落的花瓣</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</HEAD>
<BODY>
<div id="jsi-cherry-container" class="container"></div>
</BODY>
</HTML>
【获取完整代码关注微信公众号「ClassmateJie」回复“樱花”】
代码分析
-
首先定义了HTML结构，
<div id="jsi-cherry-container"></div>是一个用于承载花瓣动画的容器。 -
CSS样式部分设置了整个页面和容器的宽高为100%，且隐藏了滚动条。
-
JavaScript部分首先引入了jQuery库（虽然在这个示例中没有直接使用）。
-
RENDERER对象是动画的核心逻辑，它包含了初始化、设置参数、重构方法、创建花瓣以及渲染循环等方法。在init方法中，通过setParameters设定画布大小、获取容器元素、创建2D渲染上下文并初始化花瓣数组。createCherries方法用于生成初始数量的花瓣对象。render方法是动画渲染循环，每一帧会清除画布内容，重新排序花瓣，然后逐一渲染每个花瓣，并按照一定间隔添加新的花瓣。
-
CHERRY_BLOSSOM类代表单个花瓣，其构造函数接受一个RENDERER对象作为参数，并初始化花瓣的各种属性，包括位置、速度、颜色渐变等。该类中的init方法用于随机或指定方式初始化花瓣状态，render方法则负责绘制花瓣及涟漪效果。
-
整个动画模拟了花瓣从画面顶部飘落并在接触到水面时产生涟漪的效果，通过不断更新花瓣的位置和角度，在canvas上绘制出动态变化的花瓣图像。
【获取完整代码关注微信公众号「ClassmateJie」回复“樱花”】
