canvas实现一颗树的生长到开花

2024-05-11 04:48

本文主要是介绍canvas实现一颗树的生长到开花,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近看了一些很牛逼的特效,有位大神用canvas绘制的 梦幻大树,深深的震撼了我,超级厉害,于是我也准备尝试着去实现,可能脑子不够用,总是无法实现他那样的梦幻效果,最终只好退而求其次,实现了下面的这种大树,还算满意吧。

效果图

动态效果图

HTML源码

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>生长的树</title><style>html , body {margin: 0;padding: 0;width: 100%;height: 100%;overflow: hidden;background-color: #fff;}</style>
</head>
<body>
<canvas id="myCanvas">此浏览器不支持canvas</canvas>
<script src="../js/tree.js"></script>
</body>
</html> 

tree.js 源码

/*** Created by 004928 on 2017/8/2.*/
(function (window) {var w = window.innerWidth , h = window.innerHeight ;var ctx = null ;var treeNum = 3 ;var initRadius = 25 ;     // 树干的初始宽度var maxGeneration = 5 ;   // 最多分支的次数var branchArray = null ;  // 树干的集合var flowers = [];         // 花的集合window.MyRequestAnimationFrame = window.requestAnimationFrame ||window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame ||window.msRequestAnimationFrame ;window.MyCancelRequestAnimationFrame = window.cancelRequestAnimationFrame ||window.mozCancelRequestAnimationFrame ||window.webkitCancelRequestAnimationFrame ||window.msCancelRequestAnimationFrame ;/*** 初始化canvas*/function initCanvas () {var canvas = document.getElementById("myCanvas");canvas.setAttribute('width' , w);canvas.setAttribute('height' , h);if(canvas.getContext) {ctx = canvas.getContext('2d');initTree();loop();}}/*** 初始化树的数量*/function initTree () {branchArray = new BranchArray ();for(var i = 0 ; i < treeNum ; i++) {branchArray.add(new Branch(w / 2 , h));}}/*** 树干* @param x* @param y* @constructor*/function Branch (x , y) {this.x = x ;this.y = y ;this.radius = initRadius ;this.angle = Math.PI / 2 ; // 树枝的初始角度this.speed = 2.35 ;    // 数生长的速度this.generation = 1 ;}/*** 生长*/Branch.prototype.grow = function () {this.draw();this.update();}Branch.prototype.draw = function () {ctx.fillStyle = '#55220F';ctx.beginPath();ctx.arc(this.x , this.y , this.radius , 0 , 2 * Math.PI);ctx.fill();}/*** 更改数的高度以及扭曲度*/Branch.prototype.update = function () {// 计算树干每次的扭曲角度,因为树一般不是笔直生长的,都会有不规则的扭曲this.angle += random( -0.1 * this.generation / 2 , 0.1 * this.generation / 2 );var vx = this.speed * Math.cos(this.angle);// 因为初始角度设置为Math.PI , 所以vy要取负数var vy = - this.speed * Math.sin(this.angle);if(this.radius < 0.99 || this.generation > maxGeneration) {branchArray.remove(this);}this.x += vx ;this.y += vy ;this.radius *= 0.99 ;if(this.radius >= 0.9) {// 计算当前是第几代分支var g = (maxGeneration - 1) * initRadius / (initRadius - 1) / this.radius + (initRadius - maxGeneration) / (initRadius - 1) ;if( g > this.generation + 1) {this.generation = Math.floor(g) ;// 随机创建分支for(var i = 0 ; i < random(1,3) ; i++) {this.clone(this);}}}}/*** 创建分支* @param b*/Branch.prototype.clone = function (b) {var obj = new Branch(b.x , b.y);obj.angle = b.angle ;obj.radius = b.radius ;obj.speed = b.speed;obj.generation = b.generation;branchArray.add(obj);// 如果当前分支次数大于3则创建花,这样可以让花在树的顶端显示if( b.generation > 3 ) {flowers.push(new Flower(b.x , b.y));}}function BranchArray () {this.branchs = [];}/*** 添加树干到集合中* @param b*/BranchArray.prototype.add = function (b) {this.branchs.push(b);}/*** 从集合中移除树干* @param b*/BranchArray.prototype.remove = function (b) {if( this.branchs.length > 0) {var index = this.branchs.findIndex(function (item) {return b === item ;})if(index != -1) {this.branchs.splice(index , 1);}}}/*** 花* @param x* @param y* @constructor*/function Flower (x , y) {this.x = x ;this.y = y ;this.r = 1 ;       // 花瓣的半径this.petals = 5 ;  // 花瓣数量this.speed = 1.0235 ;// 花的绽放速度this.maxR = random(3 , 7); // 花的大小}/*** 花朵开放(通过改变花的半径实现开放的效果)* @param index*/Flower.prototype.update = function (index) {if(this.r == this.maxR) {flowers.splice(index , 1);return ;}this.r *= this.speed ;if(this.r > this.maxR) this.r = this.maxR ;}/*** 绘制花朵*/Flower.prototype.draw = function () {ctx.fillStyle = "#F3097B" ;for(var i = 1 ; i <= this.petals ; i++) {var x0 = this.x + this.r * Math.cos( Math.PI / 180  * (360 / this.petals) * i) ;var y0 = this.y + this.r * Math.sin( Math.PI / 180  * (360 / this.petals) * i) ;ctx.beginPath();ctx.arc(x0 , y0 , this.r , 0  , 2 * Math.PI) ;ctx.fill();}ctx.fillStyle = "#F56BC1";ctx.beginPath();ctx.arc(this.x  , this.y  , this.r / 2 , 0  , 2 * Math.PI) ;ctx.fill();}function random (min , max) {return Math.random() * (max - min) + min ;}/*** 循环遍历所有树干和花,并调用更新和draw方法,实现动画效果*/function loop () {for(var i = 0 ; i < branchArray.branchs.length ; i ++) {var b = branchArray.branchs[i];b.grow();}var len = flowers.length ;while (len --) {flowers[len].draw();flowers[len].update();}MyRequestAnimationFrame(loop);}window.onload = initCanvas;})(window)

原理

  • 1.生长: 因为树是越往上树干越细,我们通过绘制圆,通过无数的圆叠加来当做树的躯体,逐渐缩小圆的半径,即可实现树越往上越小的效果
  • 2.扭曲: 其次树的生长不是笔直的,是扭曲的,所以通过三角函数随机产生角度值,然后计算x,y轴的偏移量,这样就能实现树的扭曲
  • 3.分支: 通过双曲线方程 y=-a/x + b 去控制什么树在什么时候去产生分支(待会详解);
  • 4.开花: 因为花一般都是长在末梢,而我则是显示在最后几个分支的结点以及末梢进行展示(这个开花地点随意,不必纠结)
生长

树的生长变细,主要通过改变树干的半径即可, this.radius = 0.99* 每次递减;

扭曲

关于树的扭曲,这个是重点,因为树枝延伸和扭曲都是不规则的,在 Branch.prototype.update

this.angle += random( -0.1 * this.generation / 2 , 0.1 * this.generation / 2 );

在区间[-0.1,0.1]中随机产生角度,通过三角函数计算x,y轴偏移量

var vx = this.speed * Math.cos(this.angle);
// 因为初始角度设置为Math.PI , 所以vy要取负数
var vy = - this.speed * Math.sin(this.angle);

vx的正负,决定了树的扭曲,vy的正负,决定树是向上生长还是向下
你可能觉得奇怪树为什么会向下生长,首先要理解我们这里将树抽象成了一个一个的圆
无数个圆连接在一起才组成树干,这个要能理解,然后,有些树的枝干有时是会往下生长一段,然后又往上生长的
这个生长的方向我们是不能控制的,并不是所有树都一直向上生长的,所以当vy为负值时就可以实现树枝
向下生长的情况,当然这个也是随机的,也正是我们想要的效果。

分支

对于在什么时候应该让树去产生分支,我之前的想法是规定一段树干的长度,然后每次计算当前位置
距离上一个分支点的距离是否大于我规定的长度,然后产生分支,但是这样就会看到每节分支之间的长度是一样的
看起来不美观,比较死板,最终使用双曲线方程 y=-1/x 去控制因为双曲线的走势是先快后慢的,
而树的生长也是越往后分支越多,可能你会奇怪曲线是先快后慢,树分叉是先慢后快的,不符合逻辑啊
别着急,下看下图:

曲线图

从图中可以看见,X轴表示树干的粗细,Y轴表示分支的次数,当树干越来越细的时候,X轴变小
是不是Y轴就越来越大,且是先慢后快,这样就符合我们的需求了。
因此上面计算分支的次数公式就由此而来:

var g = (maxGeneration - 1) * initRadius / (initRadius - 1) / this.radius + (initRadius - maxGeneration) / (initRadius - 1) ;

得到分支次数,比较是否大于当前分支,于是便随即产生分支数量,详见 Branch.prototype.clone 也就是创建一个树干添加到BranchArray中

开花

至于开花的逻辑就比较简单,主要记录花朵开放的位置,然后绘制出来便可,至于花朵的形状,详见 Flower.prototype.draw 方法
这里我就不做过多介绍了,比较简单,而花朵的开放效果,就是改变花朵的半径

一颗大树从生长到开花所有的逻辑步骤大概这四步,其中最主要的逻辑是扭曲,为了这个扭曲我想了好多天,苦闷死我了。
最后通过循环调用 loop 方法, 遍历所有树干以及花朵,即可实现动态效果。

Github 源码下载

这篇关于canvas实现一颗树的生长到开花的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/978547

相关文章

linux批量替换文件内容的实现方式

《linux批量替换文件内容的实现方式》本文总结了Linux中批量替换文件内容的几种方法,包括使用sed替换文件夹内所有文件、单个文件内容及逐行字符串,强调使用反引号和绝对路径,并分享个人经验供参考... 目录一、linux批量替换文件内容 二、替换文件内所有匹配的字符串 三、替换每一行中全部str1为st

SpringBoot集成MyBatis实现SQL拦截器的实战指南

《SpringBoot集成MyBatis实现SQL拦截器的实战指南》这篇文章主要为大家详细介绍了SpringBoot集成MyBatis实现SQL拦截器的相关知识,文中的示例代码讲解详细,有需要的小伙伴... 目录一、为什么需要SQL拦截器?二、MyBATis拦截器基础2.1 核心接口:Interceptor

SpringBoot集成EasyPoi实现Excel模板导出成PDF文件

《SpringBoot集成EasyPoi实现Excel模板导出成PDF文件》在日常工作中,我们经常需要将数据导出成Excel表格或PDF文件,本文将介绍如何在SpringBoot项目中集成EasyPo... 目录前言摘要简介源代码解析应用场景案例优缺点分析类代码方法介绍测试用例小结前言在日常工作中,我们经

基于Python实现简易视频剪辑工具

《基于Python实现简易视频剪辑工具》这篇文章主要为大家详细介绍了如何用Python打造一个功能完备的简易视频剪辑工具,包括视频文件导入与格式转换,基础剪辑操作,音频处理等功能,感兴趣的小伙伴可以了... 目录一、技术选型与环境搭建二、核心功能模块实现1. 视频基础操作2. 音频处理3. 特效与转场三、高

Python实现中文文本处理与分析程序的示例详解

《Python实现中文文本处理与分析程序的示例详解》在当今信息爆炸的时代,文本数据的处理与分析成为了数据科学领域的重要课题,本文将使用Python开发一款基于Python的中文文本处理与分析程序,希望... 目录一、程序概述二、主要功能解析2.1 文件操作2.2 基础分析2.3 高级分析2.4 可视化2.5

Java实现预览与打印功能详解

《Java实现预览与打印功能详解》在Java中,打印功能主要依赖java.awt.print包,该包提供了与打印相关的一些关键类,比如PrinterJob和PageFormat,它们构成... 目录Java 打印系统概述打印预览与设置使用 PageFormat 和 PrinterJob 类设置页面格式与纸张

使用Go实现文件复制的完整流程

《使用Go实现文件复制的完整流程》本案例将实现一个实用的文件操作工具:将一个文件的内容完整复制到另一个文件中,这是文件处理中的常见任务,比如配置文件备份、日志迁移、用户上传文件转存等,文中通过代码示例... 目录案例说明涉及China编程知识点示例代码代码解析示例运行练习扩展小结案例说明我们将通过标准库 os

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟

SpringBoot+EasyPOI轻松实现Excel和Word导出PDF

《SpringBoot+EasyPOI轻松实现Excel和Word导出PDF》在企业级开发中,将Excel和Word文档导出为PDF是常见需求,本文将结合​​EasyPOI和​​Aspose系列工具实... 目录一、环境准备与依赖配置1.1 方案选型1.2 依赖配置(商业库方案)二、Excel 导出 PDF

Python实现MQTT通信的示例代码

《Python实现MQTT通信的示例代码》本文主要介绍了Python实现MQTT通信的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 安装paho-mqtt库‌2. 搭建MQTT代理服务器(Broker)‌‌3. pytho