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分列功能完成数据拆分。 示例代码如下…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）
HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引，可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度（创建索引的主要原因）。3. 可以加速表和表之间的连接，实现数据的参考完整性。4. 可以在查询过程中，…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...
Linux云原生安全：零信任架构与机密计算
Linux云原生安全：零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言：云原生安全的范式革命 随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序
一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制： 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程，创建出来的进程就是子进程，原来的进程为父进程。…...
Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明：这是一个机器学习实战项目（附带数据代码文档），如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下，风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
代码规范和架构【立芯理论一】（2025.06.08）
1、代码规范的目标 代码简洁精炼、美观，可持续性好高效率高复用，可移植性好高内聚，低耦合没有冗余规范性，代码有规可循，可以看出自己当时的思考过程特殊排版，特殊语法，特殊指令，必须…...
深度剖析 DeepSeek 开源模型部署与应用：策略、权衡与未来走向
在人工智能技术呈指数级发展的当下，大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性，吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型，成为释放其巨大潜力的关键所在&…...