当前位置：首页 > news >正文

Canvas 梦幻树生长动画

news 2026/4/6 13:26:25

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&…...

编程日记 2023/11/6 5:23:33

Unity之UI、模型跟随鼠标移动（自适应屏幕分辨率、锚点、pivot中心点）

一、效果 UI跟随鼠标移动，动态修改屏幕分辨率、锚点、pivot等参数也不会受到影响。同时脚本中包含3d物体跟随ui位置、鼠标位置移动二、屏幕坐标、Canvas自适应、锚点、中心点在说原理之前我们需要先了解屏幕坐标、Canvas自适应、锚点、中心的特性和之间的关系。 1.屏幕坐标…...

编程日记 2023/11/6 5:22:32

竞赛深度学习猫狗分类 - python opencv cnn

文章目录 0 前言1 课题背景2 使用CNN进行猫狗分类3 数据集处理4 神经网络的编写5 Tensorflow计算图的构建6 模型的训练和测试7 预测效果8 最后 0 前言 🔥 优质竞赛项目系列，今天要分享的是 🚩 **基于深度学习猫狗分类 ** 该项目较为新颖&a…...

编程日记 2023/11/6 5:21:32

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。…...

编程日记 2023/11/6 5:20:31

CentOS操作系统的特点

CentOS操作系统的特点如下： 免费开源：CentOS是一个免费开源的操作系统，完全免费，无需花费任何成本。稳定性高：CentOS以其出色的稳定性和安全性而闻名。它是一个基于Red Hat Enterprise Linux（RHEL&#x…...

编程日记 2023/11/6 5:19:30

Go基础（待更新）

Go基础（待更新） 参考Go 语言教程文章目录 Go基础（待更新）一、基本语法1、格式化输出2、声明并赋值1）单变量赋值2）多变量赋值二、math工具包的使用三、函数1、参数传递1）普通传递2&#xff09…...

编程日记 2023/11/6 5:17:27

二、Hadoop分布式系统基础架构

1、分布式分布式体系中，会存在众多服务器，会造成混乱等情况。那如何让众多服务器一起工作，高效且不出现问题呢？ 2、调度 （1）架构在大数据体系中，分布式的调度主要有2类架构模式&#xff1a…...

编程日记 2023/11/6 5:16:26

数据结构（超详细讲解！！）第二十一节特殊矩阵的压缩存储

1.压缩存储的目标值相同的元素只存储一次压缩掉对零元的存储，只存储非零元特殊形状矩阵： 是指非零元（如值相同的元素）或零元素分布具有一定规律性的矩阵。如： 对称矩阵上三角矩阵下三角矩阵对角矩阵准…...

编程日记 2023/11/6 5:15:24

Python最强自动化神器Playwright！再也不用为爬虫逆向担忧了！

版权说明：本文禁止抄袭、转载，侵权必究！目录一、简介+使用场景二、环境部署（准备）三、代码生成器（优势）四、元素定位器（核心）五、追踪查看器（辅助）六、权限控制与认证（高级）七、其他重要功能（进阶）八、作者Info一、简介+使用场景 Playwright是什么？来自Chat…...

编程日记 2023/11/6 5:11:18

为什么 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 …...

编程日记 2023/11/6 5:09:17

0X02

web9 阐释一波密码，依然没有什么发现，要不扫一下，或者看一看可不可以去爆破密码就先扫了看看，发现robots.txt 访问看看,出现不允许被访问的目录还是继续尝试访问看看就可以下载源码，看看源码 <?php $fl…...

编程日记 2023/11/6 5:08:16

【手写数据库所需C语言基础】可变结构体，结构体成员计算，类型强制转换为统一类型，数据库中使用C语言方法和技巧

专栏内容： 手写数据库toadb 本专栏主要介绍如何从零开发，开发的步骤，以及开发过程中的涉及的原理，遇到的问题等，让大家能跟上并且可以一起开发，让每个需要的人成为参与者。本专栏会定期更新，…...

编程日记 2023/11/6 5:07:14

Android Studio(适配器Adapter)

认识适配器在学完并且在做了一个自主项目后，我对适配器有了以下认识：1. 适配器的作用： 数据驱动的动态页面列表渲染，所以适配器主要就做了两件事：遍历数据，渲染页面（列表项）。比…...

编程日记 2023/11/6 5:05:12

携程AI布局：三重创新引领旅游行业智能化升级

2023年10月24日，携程全球合作伙伴峰会在新加坡召开，携程集团联合创始人、董事局主席梁建章做了名为《旅游业是独一无二的最好的行业》的演讲，梁建章在演讲中宣布了携程生成式 AI、内容榜单、ESG 低碳酒店标准三重创新的战略方向。这些创新将为…...

编程日记 2023/11/6 5:04:11

IOS手机耗电量测试

1. 耗电量原始测试方法 1.1 方法原理： 根据iPhone手机右上角的电池百分比变化来计算耗电量。 1.2实际操作： 在iOS通用设置中打开电池百分比数值显示，然后操作30分钟，60分钟，90分钟，看开始时和结束时电池…...

编程日记 2023/11/6 5:03:08

LeetCode.6 N字形变换

一开始想的是真的创建一个数组去按照题目所给的要求填入数据最后输出不为空的数组项但是不仅时间复杂度高而且错误频繁出现最终也没有提交成功查阅题解后发现数组并不重要假设我们忽略掉数组中的那些空白项最终输出的结果就是numRows行的字符串的拼接 string conver…...

编程日记 2023/11/6 5:01:06

BlockingQueue实现简易消息队列处理器可分区顺序消费

...

编程日记 2023/11/6 4:59:04

第一章 03Java入门-编写第一个Java程序HelloWorld以及JVM、JDK和JRE概念

文章目录前言一、下载和安装JDK二、第一个程序HelloWorld1.用记事本编写程序2.编译文件3.运行程序三、HelloWorld案例常见问题四、环境变量五、Notepad软件的安装和使用六、Java语言的发展七、Java为什么这么火八、JRE和JDK总结前言上次我们学习了常见的CMD指令以及环境变量…...

编程日记 2023/11/6 4:58:03

windbg的常见调试命令

windbg的常见调试命令 1）.break：在指定的条件下停止调试。 2）.bt：显示调用堆栈信息。 3）.catch：设置异常捕获，可以用来捕获程序中的异常并进行调试。 4）.continue：继续执…...

编程日记 2023/11/6 4:57:02

VBA之正则表达式（44）-- 拆分商品和规格

实例需求：商品组清单保存在A列中，现需要将其拆分为商品名称，保存在从B列开始的后续单元格中，部分商品包含规格，并且多种规格属性使用了逗号分隔，因此无法直接使用Excel分列功能完成数据拆分。示例代码如下…...

编程日记 2023/11/6 4:56:01

3个神奇技巧让你的Windows 11系统优化效率翻倍【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to declutter and customize your Windo…...

编程新知 2026/4/6 13:20:58

Maven证书验证难题：彻底绕过PKIX path building failed的实战指南

1. 遇到PKIX path building failed？别慌，这是证书验证的锅最近在项目编译时突然蹦出个"PKIX path building failed"的错误，是不是让你一头雾水？这其实是Maven在下载依赖时遇到了证书验证问题。简单来说，就…...

编程新知 2026/4/6 12:54:23

从按键消抖到I2C总线：一个上拉电阻，在STM32 GPIO配置里到底有多少种玩法？

从按键消抖到I2C总线：一个上拉电阻，在STM32 GPIO配置里到底有多少种玩法？ 第一次接触STM32开发板时，看到GPIO配置选项里的"上拉输入"、"开漏输出"这些专业术语，相信不少初学者和我当初一样感到困惑…...

编程新知 2026/4/6 11:21:12

Asian Beauty Z-Image Turbo商业应用：快速生成品牌宣传东方形象照

Asian Beauty Z-Image Turbo商业应用：快速生成品牌宣传东方形象照大家好，今天我们来聊一个对品牌方、市场人员和内容创作者特别有吸引力的工具——Asian Beauty Z-Image Turbo。如果你正在为品牌宣传、社交媒体内容或营销活动寻找高质量的东方形象照&a…...

编程新知 2026/4/6 8:30:38

Jimeng LoRA动态热切换实战：避免显存爆炸，轻松测试多训练阶段模型

Jimeng LoRA动态热切换实战：避免显存爆炸，轻松测试多训练阶段模型 1. 项目背景与核心价值你是否遇到过这样的困扰：在测试不同训练阶段的LoRA模型时，每次切换版本都需要重新加载底座模型，不仅耗时耗力，还…...

编程新知 2026/4/6 7:30:13

告别景深烦恼：用PyTorch+PyQt5打造你的专属多焦点图像融合桌面工具（附完整源码）

告别景深烦恼：用PyTorchPyQt5打造你的专属多焦点图像融合桌面工具每次拍摄微距或静物时，是否总在景深和清晰度之间纠结？按下快门后才发现前景清晰时背景模糊，背景聚焦时前景又失焦。专业摄影师会告诉你：这是光学镜头的…...

编程新知 2026/4/6 4:24:42

OpenClaw配置可视化：Phi-3-mini-128k-instruct模型参数调优

OpenClaw配置可视化：Phi-3-mini-128k-instruct模型参数调优 1. 为什么需要参数调优？ 上周我在用OpenClaw自动生成技术文档时遇到了一个典型问题：同样的提示词，有时候输出简洁专业，有时候却变得啰嗦跑题。这种不稳定性…...

编程新知 2026/4/6 4:12:30

告别命令行恐惧：用Docker Compose 5分钟拉起一个开箱即用的Yapi服务

告别命令行恐惧：用Docker Compose 5分钟拉起一个开箱即用的Yapi服务在API开发协作中，Yapi作为一款优秀的接口管理工具，能显著提升团队效率。但传统部署方式往往让人望而却步——需要手动安装MongoDB、配置Node.js环境、解决Python依赖&#…...

编程新知 2026/4/6 2:44:30

保姆级教程：在Win10上用VMware给Ubuntu虚拟机配置共享文件夹（含重启失效解决方案）

VMware虚拟机共享文件夹配置全指南：从基础配置到疑难解决在Windows 10主机上使用VMware运行Ubuntu虚拟机进行开发时，共享文件夹功能是提高工作效率的关键。本文将详细介绍如何从零开始配置共享文件夹，并解决常见的"安装按钮灰色"、…...

编程新知 2026/4/6 2:38:29

从API调用到完整应用：手把手教你用Dashscope和Streamlit搭建一个多模态聊天机器人

从API调用到完整应用：手把手教你用Dashscope和Streamlit搭建多模态聊天机器人在AI技术快速落地的今天，将强大的API能力转化为直观可用的产品已成为开发者的核心技能。想象一下，你只需要200行Python代码，就能构建一个能"看懂…...

编程新知 2026/4/6 2:16:18

效果图

源代码

相关文章：