目錄
寫在前面
HTML???????簡介
完整代碼
代碼分析
系列推薦
寫在最后
寫在前面
本期小編給大家推薦HTML實現的飄落的花瓣，無需安裝軟件，直接下載即可打開~
HTML???????簡介
HTML（Hypertext Markup Language）是一種用于創建網頁的標記語言。它由一系列標簽組成，這些標簽描述了網頁上的內容和結構。HTML中的標簽以尖括號包圍，通常成對出現，包括起始標簽和結束標簽，它們之間包含內容。HTML文檔通常以<html>標簽開始，以</html>標簽結束。常見的標簽包括<head>用于定義文檔的頭部信息，<title>用于指定標題，<body>用于定義文檔的主體內容等。通過使用不同的標簽和屬性，開發人員可以創建出多樣化且豐富的網頁內容，包括文本、圖像、鏈接、表格等。HTML的語法相對簡單，易于學習和使用，是構建網頁的基礎。隨著技術的發展，HTML也在不斷更新，最新版本為HTML5，提供了更多功能和語義化標簽，使得網頁開發更加靈活和可靠。
完整代碼
<!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><script>var RENDERER = {INIT_CHERRY_BLOSSOM_COUNT: 30,MAX_ADDING_INTERVAL: 10,init: function () {this.setParameters();this.reconstructMethods();this.createCherries();this.render();},setParameters: function () {this.$container = $('#jsi-cherry-container');this.width = this.$container.width();this.height = this.$container.height();this.context = $('<canvas />').attr({ width: this.width, height: this.height }).appendTo(this.$container).get(0).getContext('2d');this.cherries = [];this.maxAddingInterval = Math.round(this.MAX_ADDING_INTERVAL * 1000 / this.width);this.addingInterval = this.maxAddingInterval;},reconstructMethods: function () {this.render = this.render.bind(this);},createCherries: function () {for (var i = 0, length = Math.round(this.INIT_CHERRY_BLOSSOM_COUNT * this.width / 1000); i < length; i++) {this.cherries.push(new CHERRY_BLOSSOM(this, true));}},render: function () {requestAnimationFrame(this.render);this.context.clearRect(0, 0, this.width, this.height);this.cherries.sort(function (cherry1, cherry2) {return cherry1.z - cherry2.z;});for (var i = this.cherries.length - 1; i >= 0; i--) {if (!this.cherries[i].render(this.context)) {this.cherries.splice(i, 1);}}if (--this.addingInterval == 0) {this.addingInterval = this.maxAddingInterval;this.cherries.push(new CHERRY_BLOSSOM(this, false));}}};var CHERRY_BLOSSOM = function (renderer, isRandom) {this.renderer = renderer;this.init(isRandom);};CHERRY_BLOSSOM.prototype = {FOCUS_POSITION: 300,FAR_LIMIT: 600,MAX_RIPPLE_COUNT: 100,RIPPLE_RADIUS: 100,SURFACE_RATE: 0.5,SINK_OFFSET: 20,init: function (isRandom) {this.x = this.getRandomValue(-this.renderer.width, this.renderer.width);this.y = isRandom ? this.getRandomValue(0, this.renderer.height) : this.renderer.height * 1.5;this.z = this.getRandomValue(0, this.FAR_LIMIT);this.vx = this.getRandomValue(-2, 2);this.vy = -2;this.theta = this.getRandomValue(0, Math.PI * 2);this.phi = this.getRandomValue(0, Math.PI * 2);this.psi = 0;this.dpsi = this.getRandomValue(Math.PI / 600, Math.PI / 300);this.opacity = 0;this.endTheta = false;this.endPhi = false;this.rippleCount = 0;var axis = this.getAxis(),theta = this.theta + Math.ceil(-(this.y + this.renderer.height * this.SURFACE_RATE) / this.vy) * Math.PI / 500;theta %= Math.PI * 2;this.offsetY = 40 * ((theta <= Math.PI / 2 || theta >= Math.PI * 3 / 2) ? -1 : 1);this.thresholdY = this.renderer.height / 2 + this.renderer.height * this.SURFACE_RATE * axis.rate;this.entityColor = this.renderer.context.createRadialGradient(0, 40, 0, 0, 40, 80);this.entityColor.addColorStop(0, 'hsl(330, 70%, ' + 50 * (0.3 + axis.rate) + '%)');this.entityColor.addColorStop(0.05, 'hsl(330, 40%,' + 55 * (0.3 + axis.rate) + '%)');this.entityColor.addColorStop(1, 'hsl(330, 20%, ' + 70 * (0.3 + axis.rate) + '%)');this.shadowColor = this.renderer.context.createRadialGradient(0, 40, 0, 0, 40, 80);this.shadowColor.addColorStop(0, 'hsl(330, 40%, ' + 30 * (0.3 + axis.rate) + '%)');this.shadowColor.addColorStop(0.05, 'hsl(330, 40%,' + 30 * (0.3 + axis.rate) + '%)');this.shadowColor.addColorStop(1, 'hsl(330, 20%, ' + 40 * (0.3 + axis.rate) + '%)');},getRandomValue: function (min, max) {return min + (max - min) * Math.random();},getAxis: function () {var rate = this.FOCUS_POSITION / (this.z + this.FOCUS_POSITION),x = this.renderer.width / 2 + this.x * rate,y = this.renderer.height / 2 - this.y * rate;return { rate: rate, x: x, y: y };},renderCherry: function (context, axis) {context.beginPath();context.moveTo(0, 40);context.bezierCurveTo(-60, 20, -10, -60, 0, -20);context.bezierCurveTo(10, -60, 60, 20, 0, 40);context.fill();for (var i = -4; i < 4; i++) {context.beginPath();context.moveTo(0, 40);context.quadraticCurveTo(i * 12, 10, i * 4, -24 + Math.abs(i) * 2);context.stroke();}},render: function (context) {var axis = this.getAxis();if (axis.y == this.thresholdY && this.rippleCount < this.MAX_RIPPLE_COUNT) {context.save();context.lineWidth = 2;context.strokeStyle = 'hsla(0, 0%, 100%, ' + (this.MAX_RIPPLE_COUNT - this.rippleCount) / this.MAX_RIPPLE_COUNT + ')';context.translate(axis.x + this.offsetY * axis.rate * (this.theta <= Math.PI ? -1 : 1), axis.y);context.scale(1, 0.3);context.beginPath();context.arc(0, 0, this.rippleCount / this.MAX_RIPPLE_COUNT * this.RIPPLE_RADIUS * axis.rate, 0, Math.PI * 2, false);context.stroke();context.restore();this.rippleCount++;}if (axis.y < this.thresholdY || (!this.endTheta || !this.endPhi)) {if (this.y <= 0) {this.opacity = Math.min(this.opacity + 0.01, 1);}context.save();context.globalAlpha = this.opacity;context.fillStyle = this.shadowColor;context.strokeStyle = 'hsl(330, 30%,' + 40 * (0.3 + axis.rate) + '%)';context.translate(axis.x, Math.max(axis.y, this.thresholdY + this.thresholdY - axis.y));context.rotate(Math.PI - this.theta);context.scale(axis.rate * -Math.sin(this.phi), axis.rate);context.translate(0, this.offsetY);this.renderCherry(context, axis);context.restore();}context.save();context.fillStyle = this.entityColor;context.strokeStyle = 'hsl(330, 40%,' + 70 * (0.3 + axis.rate) + '%)';context.translate(axis.x, axis.y + Math.abs(this.SINK_OFFSET * Math.sin(this.psi) * axis.rate));context.rotate(this.theta);context.scale(axis.rate * Math.sin(this.phi), axis.rate);context.translate(0, this.offsetY);this.renderCherry(context, axis);context.restore();if (this.y <= -this.renderer.height / 4) {if (!this.endTheta) {for (var theta = Math.PI / 2, end = Math.PI * 3 / 2; theta <= end; theta += Math.PI) {if (this.theta < theta && this.theta + Math.PI / 200 > theta) {this.theta = theta;this.endTheta = true;break;}}}if (!this.endPhi) {for (var phi = Math.PI / 8, end = Math.PI * 7 / 8; phi <= end; phi += Math.PI * 3 / 4) {if (this.phi < phi && this.phi + Math.PI / 200 > phi) {this.phi = Math.PI / 8;this.endPhi = true;break;}}}}if (!this.endTheta) {if (axis.y == this.thresholdY) {this.theta += Math.PI / 200 * ((this.theta < Math.PI / 2 || (this.theta >= Math.PI && this.theta < Math.PI * 3 / 2)) ? 1 : -1);} else {this.theta += Math.PI / 500;}this.theta %= Math.PI * 2;}if (this.endPhi) {if (this.rippleCount == this.MAX_RIPPLE_COUNT) {this.psi += this.dpsi;this.psi %= Math.PI * 2;}} else {this.phi += Math.PI / ((axis.y == this.thresholdY) ? 200 : 500);this.phi %= Math.PI;}if (this.y <= -this.renderer.height * this.SURFACE_RATE) {this.x += 2;this.y = -this.renderer.height * this.SURFACE_RATE;} else {this.x += this.vx;this.y += this.vy;}return this.z > -this.FOCUS_POSITION && this.z < this.FAR_LIMIT && this.x < this.renderer.width * 1.5;}};$(function () {RENDERER.init();});</script>
</BODY></HTML>代碼分析
這段代碼是一個HTML頁面，其中包含一個canvas元素和相關的JavaScript代碼。這個頁面創建了一個飄落花瓣的動畫效果。具體分析如下：
1. 首先定義了HTML結構，`<div id="jsi-cherry-container"></div>` 是一個用于承載花瓣動畫的容器。
2. CSS樣式部分設置了整個頁面和容器的寬高為100%，且隱藏了滾動條。
3. JavaScript部分首先引入了jQuery庫（雖然在這個示例中沒有直接使用）。
4. RENDERER對象是動畫的核心邏輯，它包含了初始化、設置參數、重構方法、創建花瓣以及渲染循環等方法。在init方法中，通過setParameters設定畫布大小、獲取容器元素、創建2D渲染上下文并初始化花瓣數組。createCherries方法用于生成初始數量的花瓣對象。render方法是動畫渲染循環，每一幀會清除畫布內容，重新排序花瓣，然后逐一渲染每個花瓣，并按照一定間隔添加新的花瓣。
5. CHERRY_BLOSSOM類代表單個花瓣，其構造函數接受一個RENDERER對象作為參數，并初始化花瓣的各種屬性，包括位置、速度、顏色漸變等。該類中的init方法用于隨機或指定方式初始化花瓣狀態，render方法則負責繪制花瓣及漣漪效果。
6. 整個動畫模擬了花瓣從畫面頂部飄落并在接觸到水面時產生漣漪的效果，通過不斷更新花瓣的位置和角度，在canvas上繪制出動態變化的花瓣圖像。
系列推薦
| 序號 | 目錄 | 直達鏈接 |
| 1 | HTML實現3D相冊 | https://want595.blog.csdn.net/article/details/138652869 |
| 2 | HTML元素周期表 | https://want595.blog.csdn.net/article/details/138653653 |
| 3 | HTML黑客帝國字母雨 | https://want595.blog.csdn.net/article/details/138654054 |
| 4 | HTML五彩繽紛的愛心 | https://want595.blog.csdn.net/article/details/138654581 |
| 5 | HTML飄落的花瓣 | https://want595.blog.csdn.net/article/details/138785324 |
| 6 | ||
| 7 | ||
| 8 | ||
| 9 | ||
| 10 | ||
| 11 | ||
| 12 | ||
| 13 | ||
| 14 | ||
| 15 | ||
| 16 | ||
| 17 | ||
| 18 | ||
| 19 | ||
| 20 | ||
| 21 | ||
| 22 | ||
| 23 | ||
| 24 | ||
| 25 | ||
| 26 | ||
| 27 |
寫在最后
我是一只有趣的兔子，感謝你的喜歡！
——封裝，String，StringBuilder類。)
)
)
