利用JavaScript在canvas中画一棵树
看到这个网页中在canvas里绘制一棵树,感到很有趣,于是仿照他的源代码,同样也利用JavaScript生成了一棵树。
在程序中需要两个对象Branch, BranchCollection。Branch中存放当前正在绘制的这一段树枝的信息,BranchCollection中存放的是所有的树枝。
首先对canvas画布进行初始设置:
var width = window.innerWidth;
var height = window.innerHeight;
var canvas = document.getElementById("canvastree");
canvas.width = width;
canvas.height = height;
对初始的branch的数量、半径进行设置:
// 设置初始的数量
var n = 2 + Math.random() * 3;
// 设定初始的半径大小
var initialRadius = width / 50;
新建一个BranchCollection对象用于放置所有的branch:
branches = new BranchCollection();
这里的BranchCollection对象有如下的几个方法:
add():加入一个新元素
remove():删除一个元素
process():对集合内的每一个元素,依次调用这个元素自己的处理方法
对于创建的BranchCollection对象,将初始的branch依次加入其中,并初始化。
for (var i = 0; i < n; i++) {branch = new Branch();// 以canvas的中点为基准,左右各占一个initialRadius的宽度// 根据序号i算出初始x坐标branch.x = width/2 - initialRadius + i * 2 * initialRadius / n;branch.radius = initialRadius;// 将新的branch加入集合中去branches.add(branch);
}
Branch对象有这些属性:
x,y:坐标值
radius:每一条显示在屏幕上的树枝实际上都是由半径逐渐减小的圆形组合而成的,radius就是圆形的半径
angle:树枝从底部向上延伸时的角度,初始值是PI/2
speed:一个参数,用于控制树枝延伸时的速度
generation:当前的树枝是第几代,当出现分叉时,generation会加一
distance:当前的这一段树枝的长度,用于控制分叉的概率
fillStyle, shadowColor, shadowBlur:绘图参数
Branch对象的方法有:
precess():主要的处理部分,调用其它几个方法
draw():在当前的坐标处画出一个圆形
iterate():将branch向上延伸,更新坐标值,减小半径,给angle增加一个随机值
split():根据distance值判断当前是否可以分叉,如果可以则新建若干个Branch对象加入集合,并删除当前的父代对象
die():判断是否需要删除当前对象
最后通过setInterval()函数来生成图像,每隔一个时间间隔对所有branch进行一次遍历处理,画出图形,更新坐标,生成子代等。
var interval = setInterval(function() {// 对集合内的每个元素依次进行处理branches.process();if (branches.branches.length == 0) {clearInterval(interval);}
}, 20);
这样我们就完成了在canvas上绘制一棵树的工作。
GitHub代码地址
这里是我的一个在线的 demo
这篇原来发在我的博客上。
利用JavaScript在canvas中画一棵树相关推荐
- python画树干_python教你画一棵树
最近不少读者对 python 的 turtle 库比较感兴趣, 用python画一朵玫瑰给你 ,之前也写了一篇文章讲过如何画一朵玫瑰花.今天在知乎上找了一个用 turtle 画树的 python 程序 ...
- python画三瓣树叶_python教你画一棵树
最近不少读者对 python 的 turtle 库比较感兴趣,用python画一朵玫瑰给你,之前也写了一篇文章讲过如何画一朵玫瑰花.今天在知乎上找了一个用 turtle 画树的 python 程序,一 ...
- 用 vue + d3 画一棵树
结果预览 github pages vue 和 d3 的角色 画图可分为两步: 元素坐标计算 数据绑定 坐标计算只需要一些 api,本文使用 d3. 数据绑定既可以借助 d3,也可以使用 vue.d3 ...
- 使用JavaScript在Canvas上画出一片星空
随着Html5的迅猛发展,画布也变得越来越重要.下面我就写一个关于在canvas上画出一片星空的简单的代码的示例. 理论基础 初始化一个canvas,获得一个用于绘制图形的上下文环境context.并 ...
- python画树林_如何用Scikit-learn可视化随机森林中的一棵树
废话不多说,先贴代码from sklearn.datasets import load_iris iris = load_iris() # Model (can also use single dec ...
- python画一棵树的心理测试_【心理测试】画树测试:一棵树读你的人生
★画树测试:一棵树读你的人生★? 心理导读:你会怎样随笔画一棵大树呢?这棵大树又折射出你怎样的秘密?在房树人心理测验的世界(HTP),树表现个体的精神及性的成熟性,是个体生命成长的历程的象征.你画怎样 ...
- 从移动激光扫描数据中自动提取单棵树的双重生长方法
论文题目:A dual growing method for the automatic extraction of individual trees from mobile laser scanni ...
- python画一棵树源代码_Python+Turtle动态绘制一棵树实例分享
本文实例主要是对turtle的使用,实现Python+turtle动态绘制一棵树的实例,具体代码: # drawtree.py from turtle import Turtle, mainloop ...
- 图11——判断图中是否为一棵树
编写算法,判断一个无向图是否是一颗树. [分析] 一个无向图G是一棵树的条件为:G必须是无回路的连通图或n-1条边的连通图,这里我们采用后者作为判断条件.例如下图所示: 上面的无向图就是一棵树,它有6 ...
- [JavaScript]利用JavaScript控制table中row的显示
在程序中有时候我们需要根据选择来显示我们需要的信息,通过控制table中row的显示可以实现这样的功能. NoneRow1Row2Row3 Row1 Row2 Row3 JavaScript < ...
最新文章
- spring配置文件详解【总结】
- 18.图像用户界面入门:EasyGui
- C#委托(匿名函数)的各种变形写法
- 远程唤醒_Python黑科技:在家远程遥控公司电脑,python+微信一键连接!
- 最佳买卖股票时机含冷冻期
- python提供了名称为什么的构造方法_python面向对象编程(1)——基本概念,术语,self,构造器...
- nginx实现网站url带参跳转 POST请求GET请求跳转
- 第二章 jQuery选择器
- 北漂生活第十四弹-5.24 兜兜转转又是一周
- 3D模型欣赏:银发美女 ,性感女骑士
- 【python】python读取命令行选项参数
- 人数全球第一,但现在中国的问题不是人太多,而是太少 | 浪潮工作室
- 微信公众号自定义菜单和推送模板消息
- Linux发行版本及常用国产系统+系统优化
- 【笨方法学PAT】1116 Come on! Let's C (20 分)
- 广域虚拟数据空间中边缘缓存系统的研究与实现
- h5调用微信,微博等分享
- 厂家深度解读:采用凯夫拉中底的劳保鞋优点有哪些?
- 美国〈国家地理〉镜头中的极致之地
- 重学前端-总结:前言,从今天起,重新理解前端
热门文章
- 华硕电脑GeForce类显卡如何解决:NVIDIA安装程序无法继续
- 程序猿生存指南-33 寂寞撩人
- 如何让图片在html中自动填充颜色,教你快速给白背景图填充背景颜色
- 怎样将tiff格式转成jpg或png?
- xp系统查计算机设备型号,xp电脑设备型号怎么查询
- 五线谱音名和组别对照表_五线谱最全知识及符号! 太实用了,100%收藏!!!...
- Web容器(二):HTTP协议
- 华为交换机 查ip冲突_华为交换机怎么通过ip查端口号
- 开发者必备的网站。javascript手册,css手册
- 电话号码大全(常识版)