Canvas 梦幻树生长动画
canvas可以制作出非常炫酷的动画，以下是一个梦幻树的示例。
效果图
源代码
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>梦幻数生长动画</title><script type="text/javascript" src=" http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {var Vector = function (x, y) {this.x = x || 0;this.y = y || 0;};Vector.prototype = {add: function (v) {this.x += v.x;this.y += v.y;return this;},length: function () {return Math.sqrt(this.x * this.x + this.y * this.y);},rotate: function (theta) {var x = this.x;var y = this.y;this.x = Math.cos(theta) * this.x - Math.sin(theta) * this.y;this.y = Math.sin(theta) * this.x + Math.cos(theta) * this.y;//this.x = Math.cos(theta) * x - Math.sin(theta) * y;//this.y = Math.sin(theta) * x + Math.cos(theta) * y;return this;},mult: function (f) {this.x *= f;this.y *= f;return this;}};var Leaf = function (p, r, c, ctx) {this.p = p || null;this.r = r || 0;this.c = c || 'rgba(255,255,255,1.0)';this.ctx = ctx;}Leaf.prototype = {render: function () {var that = this;var ctx = this.ctx;var f = Branch.random(1, 2)for (var i = 0; i < 5; i++) {(function (r) {setTimeout(function () {ctx.beginPath();ctx.fillStyle = that.color;ctx.moveTo(that.p.x, that.p.y);ctx.arc(that.p.x, that.p.y, r, 0, Branch.circle, true);ctx.fill();}, r * 60);})(i);}}}var Branch = function (p, v, r, c, t) {this.p = p || null;this.v = v || null;this.r = r || 0;this.length = 0;this.generation = 1;this.tree = t || null;this.color = c || 'rgba(255,255,255,1.0)';this.register();};Branch.prototype = {register: function () {this.tree.addBranch(this);},draw: function () {var ctx = this.tree.ctx;ctx.beginPath();ctx.fillStyle = this.color;ctx.moveTo(this.p.x, this.p.y);ctx.arc(this.p.x, this.p.y, this.r, 0, Branch.circle, true);ctx.fill();},modify: function () {var angle = 0.18 - (0.10 / this.generation);this.p.add(this.v);this.length += this.v.length();this.r *= 0.99;this.v.rotate(Branch.random(-angle, angle)); //.mult(0.996);if (this.r < 0.8 || this.generation > 10) {this.tree.removeBranch(this);var l = new Leaf(this.p, 10, this.color, this.tree.ctx);l.render();}},grow: function () {this.draw();this.modify();this.fork();},fork: function () {var p = this.length - Branch.random(100, 200); // + (this.generation * 10);if (p > 0) {var n = Math.round(Branch.random(1, 3));this.tree.stat.fork += n - 1;for (var i = 0; i < n; i++) {Branch.clone(this);}this.tree.removeBranch(this);}}};Branch.circle = 2 * Math.PI;Branch.random = function (min, max) {return Math.random() * (max - min) + min;};Branch.clone = function (b) {var r = new Branch(new Vector(b.p.x, b.p.y), new Vector(b.v.x, b.v.y), b.r, b.color, b.tree);r.generation = b.generation + 1;return r;};Branch.rgba = function (r, g, b, a) {return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';};Branch.randomrgba = function (min, max, a) {return Branch.rgba(Math.round(Branch.random(min, max)), Math.round(Branch.random(min, max)), Math.round(Branch.random(min, max)), a);};var Tree = function () {var branches = [];var timer;this.stat = {fork: 0,length: 0};this.addBranch = function (b) {branches.push(b);};this.removeBranch = function (b) {for (var i = 0; i < branches.length; i++) {if (branches[i] === b) {branches.splice(i, 1);return;}}};this.render = function (fn) {var that = this;timer = setInterval(function () {fn.apply(that, arguments);if (branches.length > 0) {for (var i = 0; i < branches.length; i++) {branches[i].grow();}}else {//clearInterval(timer);}}, 1000 / 30);};this.init = function (ctx) {this.ctx = ctx;};this.abort = function () {branches = [];this.stat = {fork: 0,length: 0}};};function init() {// initvar $window = $(window);var $body = $("body");var canvas_width = $window.width();var canvas_height = $window.height();var center_x = canvas_width / 2;var stretch_factor = 600 / canvas_height;var y_speed = 3 / stretch_factor;var $statMsg = $("#statMsg");// txvar canvas = $('#canvas')[0];canvas.width = canvas_width;canvas.height = canvas_height;var ctx = canvas.getContext("2d");ctx.globalCompositeOperation = "lighter";// treevar t = new Tree();t.init(ctx);for (var i = 0; i < 3; i++) {new Branch(new Vector(center_x, canvas_height), new Vector(Math.random(-1, 1), -y_speed), 15 / stretch_factor, Branch.randomrgba(0, 255, 0.3), t);}t.render(function () {$statMsg.html(this.stat.fork);});}$(function () {init();});})(jQuery);</script><style type="text/css">body {padding: 0;margin: 0;background: #fff;font-family: Courier;}
canvas {background-color: #000;cursor: pointer;}
</style></head>
<body><canvas id='canvas'></canvas></body>
</html>相关文章：
Canvas 梦幻树生长动画
canvas可以制作出非常炫酷的动画，以下是一个梦幻树的示例。 效果图 源代码 <!DOCTYPE> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> <title>梦幻数生长动画</title&…...
Unity之UI、模型跟随鼠标移动（自适应屏幕分辨率、锚点、pivot中心点）
一、效果 UI跟随鼠标移动， 动态修改屏幕分辨率、锚点、pivot等参数也不会受到影响。同时脚本中包含3d物体跟随ui位置、鼠标位置移动 二、屏幕坐标、Canvas自适应、锚点、中心点 在说原理之前我们需要先了解屏幕坐标、Canvas自适应、锚点、中心的特性和之间的关系。 1.屏幕坐标…...
竞赛 深度学习猫狗分类 - python opencv cnn
文章目录 0 前言1 课题背景2 使用CNN进行猫狗分类3 数据集处理4 神经网络的编写5 Tensorflow计算图的构建6 模型的训练和测试7 预测效果8 最后 0 前言 🔥 优质竞赛项目系列，今天要分享的是 🚩 **基于深度学习猫狗分类 ** 该项目较为新颖&a…...
S4.2.4.7 Start of Data Stream Ordered Set (SDS)
一 本章节主讲知识点 1.1 xxx 1.2 sss 1.3 ddd 二 本章节原文翻译 2.1 SDS 数据流开始有序集 SDS 代表传输的数据类型从有序集转为数据流。它会在 Configuration.Idle，Recovery.Idle 和 Tx 的 L0s.FTS 状态发送。Loopback 模式下，主机允许发送 SDS。…...
CentOS操作系统的特点
CentOS操作系统的特点如下： 免费开源：CentOS是一个免费开源的操作系统，完全免费，无需花费任何成本。 稳定性高：CentOS以其出色的稳定性和安全性而闻名。它是一个基于Red Hat Enterprise Linux（RHEL&#x…...
Go基础（待更新）
Go基础（待更新） 参考Go 语言教程 文章目录 Go基础（待更新）一、基本语法1、格式化输出2、声明并赋值1）单变量赋值2）多变量赋值 二、math工具包的使用三、函数1、参数传递1）普通传递2）…...
二、Hadoop分布式系统基础架构
1、分布式 分布式体系中，会存在众多服务器，会造成混乱等情况。那如何让众多服务器一起工作，高效且不出现问题呢？ 2、调度 （1）架构 在大数据体系中，分布式的调度主要有2类架构模式：…...
数据结构（超详细讲解！！）第二十一节 特殊矩阵的压缩存储
1.压缩存储的目标 值相同的元素只存储一次 压缩掉对零元的存储，只存储非零元 特殊形状矩阵： 是指非零元（如值相同的元素）或零元素分布具有一定规律性的矩阵。 如： 对称矩阵 上三角矩阵 下三角矩阵 对角矩阵 准…...
Python最强自动化神器Playwright！再也不用为爬虫逆向担忧了！
版权说明：本文禁止抄袭、转载，侵权必究！ 目录 一、简介+使用场景二、环境部署（准备）三、代码生成器（优势）四、元素定位器（核心）五、追踪查看器（辅助）六、权限控制与认证（高级）七、其他重要功能（进阶）八、作者Info一、简介+使用场景 Playwright是什么？来自Chat…...
为什么 conda 不能升级 python 到 3.12
为什么 conda 不能升级 python 到 3.12 2023-11-05 23:33:29 ChrisZZ 1. 目的 弄清楚为什么执行了如下升级命令后， python 版本还是 3.11？ conda update conda conda update python2. 原因 因为 conda forge 没有完成 migration Migration is the …...
0X02
web9 阐释一波密码，依然没有什么 发现，要不扫一下，或者看一看可不可以去爆破密码 就先扫了看看，发现robots.txt 访问看看,出现不允许被访问的目录 还是继续尝试访问看看 就可以下载源码，看看源码 <?php $fl…...
【手写数据库所需C语言基础】可变结构体，结构体成员计算，类型强制转换为统一类型，数据库中使用C语言方法和技巧
专栏内容： 手写数据库toadb 本专栏主要介绍如何从零开发，开发的步骤，以及开发过程中的涉及的原理，遇到的问题等，让大家能跟上并且可以一起开发，让每个需要的人成为参与者。 本专栏会定期更新，…...
)
Android Studio(适配器Adapter)
认识适配器 在学完并且在做了一个自主项目后，我对适配器有了以下认识：1. 适配器的作用： 数据驱动的动态页面列表渲染，所以适配器主要就做了两件事：遍历数据，渲染页面（列表项）。比…...
携程AI布局：三重创新引领旅游行业智能化升级
2023年10月24日，携程全球合作伙伴峰会在新加坡召开，携程集团联合创始人、董事局主席梁建章做了名为《旅游业是独一无二的最好的行业》的演讲，梁建章在演讲中宣布了携程生成式 AI、内容榜单、ESG 低碳酒店标准三重创新的战略方向。这些创新将为…...
IOS手机耗电量测试
1. 耗电量原始测试方法 1.1 方法原理： 根据iPhone手机右上角的电池百分比变化来计算耗电量。 1.2实际操作： 在iOS通用设置中打开电池百分比数值显示，然后操作30分钟，60分钟，90分钟，看开始时和结束时电池…...
LeetCode.6 N字形变换
一开始想的是真的创建一个数组 去按照题目所给的要求填入数据 最后输出不为空的数组项 但是不仅时间复杂度高 而且错误频繁出现 最终也没有提交成功 查阅题解后发现数组并不重要 假设我们忽略掉数组中的那些空白项 最终输出的结果就是numRows行的字符串的拼接 string conver…...
第一章 03Java入门-编写第一个Java程序HelloWorld以及JVM、JDK和JRE概念
文章目录 前言一、下载和安装JDK二、第一个程序HelloWorld1.用记事本编写程序2.编译文件3.运行程序三、HelloWorld案例常见问题四、环境变量五、Notepad软件的安装和使用六、Java语言的发展七、Java为什么这么火八、JRE和JDK总结前言 上次我们学习了常见的CMD指令以及环境变量…...
windbg的常见调试命令
windbg的常见调试命令 1）.break：在指定的条件下停止调试。 2）.bt：显示调用堆栈信息。 3）.catch：设置异常捕获，可以用来捕获程序中的异常并进行调试。 4）.continue：继续执…...
VBA之正则表达式（44）-- 拆分商品和规格
实例需求：商品组清单保存在A列中，现需要将其拆分为商品名称，保存在从B列开始的后续单元格中，部分商品包含规格，并且多种规格属性使用了逗号分隔，因此无法直接使用Excel分列功能完成数据拆分。 示例代码如下…...
Goframe项目实战：从数据库表到API接口的全链路开发指南（含避坑点）
Goframe项目实战：从数据库表到API接口的全链路开发指南（含避坑点）在当今微服务架构盛行的时代，Go语言因其高性能和并发优势成为后端开发的热门选择。而Goframe作为一款企业级的Go应用开发框架，提供了从数据库操作到API…...
MCP Server生产级配置：Playwright与LLM集成的避坑指南
1. 这不是又一个“Playwright入门教程”，而是一份能直接塞进CI流水线的MCP Server生产级配置实录你有没有遇到过这样的场景：团队刚决定用AI驱动自动化测试，技术选型会上大家一致看好Playwright MCP（Model Context Protocol&#…...
政企数据安全：危机与出路
随着数字化转型的浪潮席卷全球，公共部门积累的数据量呈爆炸式增长。从公民个人信息到公共服务记录，从财政预算到基础设施管理数据——这些宝贵资源在提升政府治理效率的同时，也悄然成为网络犯罪分子的“新猎物”。当公共数据逐渐成为数字时代…...
贵阳婚礼西服定制攻略：面料、工艺、版型避坑指南
婚礼西装是男士婚礼造型的核心，区别于日常商务正装，婚礼西服更看重版型精致度、面料质感、上身挺拔感以及镜头适配度。在贵阳备婚的新人，大多会放弃成品西装，选择专属定制服务。但本地婚礼西服定制市场参差不齐，很多新…...
如何高效批量下载音乐歌词：智能歌词管理完整指南
如何高效批量下载音乐歌词：智能歌词管理完整指南 【免费下载链接】ZonyLrcToolsX ZonyLrcToolsX 是一个能够方便地下载歌词的小软件。 项目地址: https://gitcode.com/gh_mirrors/zo/ZonyLrcToolsX ZonyLrcToolsX 是一款专业的跨平台歌词下载工具，…...
金融合规审核为何人力堆积却仍漏洞百出？2026年RegTech演进与Agent全链路闭环解决方案
在2026年的金融监管环境下，合规审核已不再是简单的“查漏补缺”，而是演变为一场高强度的算力与逻辑博弈。尽管金融机构在合规成本上的投入逐年攀升，甚至不惜以“人海战术”填补流程断点，但监管罚单的数额与频率却并未显著下降。这…...
2026智慧校园规划必读：如何在预算吃紧下选到高性价比方案
✅作者简介：合肥自友科技 📌核心产品：智慧校园平台(包括教工管理、学工管理、教务管理、考务管理、后勤管理、德育管理、资产管理、公寓管理、实习管理、就业管理、离校管理、科研平台、档案管理、学生平台等26个子平台) 。公司所有人员均有多…...
可解释AI新突破：基于局部帕累托最优的模型解释框架
1. 项目概述：当AI模型成为“黑箱”，我们如何撬开它？在机器学习项目里摸爬滚打十几年，我见过太多这样的场景：团队花大力气训练出一个准确率高达95%的复杂模型（比如深度神经网络），业务…...
机器学习驱动储氢材料发现：从特征工程到DFT/MD验证的完整指南
1. 项目概述与核心思路氢能被视为未来清洁能源体系的关键一环，但如何安全、高效、经济地储存氢气，一直是制约其大规模应用的瓶颈。在众多储氢技术路线中，固态储氢，特别是基于金属氢化物的储氢材料，因其高体积储氢密度和…...
PrivacyGuard实战：基于实证差分隐私的机器学习模型隐私审计框架
1. 项目概述与核心价值在过去的几年里，我亲眼见证了机器学习模型从实验室走向银行、医疗、社交网络等各个敏感领域的全过程。模型性能的每一次飞跃都令人兴奋，但随之而来的隐私泄露事件也一次次为我们敲响警钟。一个在医疗数据上训练出的诊断模型&#x…...