同样必须要有html容器。新建Index.html，代码如下:
<、html>
1 <、head>
2 <、meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />
3 <、title>canvas tree
4 <、/head>
5 <、body>
6 <、script type="text/javascript" src="tree.js">
7 <、/body>
8 <、/html>
接下来咱们开始tree.js:
、var canvas = document.createElement("canvas")
9 var ctx = canvas.getContext("2d")
10 canvas.width = 640
11 canvas.height = 480
12 document.body.appendChild(canvas)
代码很好理解，创建一个canvas画布，然后选择为2d画布，设置长宽，最后将这个画布添加到body标签下。
这个脚本最重要的函数在下面，大树就是递归调用这个函数实现的，调用一次画一条线段:
var drawTree = function (ctx, startX, startY, length, angle, depth, branchWidth){
13 var rand = Math.random,
14 newLength, newAngle, newDepth, maxBranch = 3,
15 endX, endY, maxAngle = 2 * Math.PI / 4,
16 subBraches
17 ctx.beginPath()
18 ctx.moveTo(startX, startY)
19 endX = startX + length * Math.cos(angle)
20 endY = startY + length * Math.sin(angle)
21 ctx.lineCap = 'round'
22 ctx.lineWidth = branchWidth
23 ctx.lineTo(endX, endY)
24 if (depth <= 2){
25 ctx.strokeStyle = 'rgb(0,' + (((rand() * 64) + 128) >>0) + ',0)'
26 } else {
27 ctx.strokeStyle = 'rgb(' + (((rand() * 64) + 64) >>0) + ',50,25)'
28 }
29 ctx.stroke()
30 newDepth = depth - 1
31 if (!newDepth)
32 return
33 subBranches = (rand() * (maxBranch - 1)) + 1
34 branchWidth *= 0.7
35 for (var i = 0i <subBranchesi++){
36 newAngle = angle + rand() * maxAngle - maxAngle * 0.5
37 newLength = length * (0.7 + rand() * 0.3)
38 drawTree(ctx, endX, endY, newLength, newAngle, newDepth, branchWidth)
39 }
40 }
接下来一点点解释:
首先，解释下各个变量的含义。ctx就是前面我们的2d画布startX是线段开始的横坐标，同理startY是纵坐标length是线段长度angle是角度depth是深度，叶子深度为1，树干为12(可自己设定)branchWidth就线段的粗细。有了这些信息，其实就描述了一个线段，通过这些信息我们才能画一个线段。
接下来又很可耻地一大段定义:
var rand = Math.random,
41 newLength, newAngle, newDepth, maxBranch = 3,
42 endX, endY, maxAngle = 2 * Math.PI / 4,
43 subBraches
rand其实就是随机一个0~1之间的实数，顾名思义，接下来这些new的就是下一节线段的各种参数。maxBranch就是最多有3个分叉，最大的角度 PI/2 即为，下一级调整角度在90%范围内。subBranches就是分叉的个数。
好了，重要可以画了:
ctx.beginPath()
44 ctx.moveTo(startX, startY)
45 endX = startX + length * Math.cos(angle)
46 endY = startY + length * Math.sin(angle)
47 ctx.lineCap = 'round'
48 ctx.lineWidth = branchWidth
49 ctx.lineTo(endX, endY)
beginPath()表示告诉浏览器“我要开始画了!”，把之前的记录放弃了，这点有点像ps。moveTo()把光标移动到(startX, startY)，再计算终点坐标，endX,endY，有点像高中学的参数方程。然后告诉浏览器，lineCap要round,线段的两头要是圆形的。有多粗呢?等于branchWidth。线段一直画到(endX, endY)。
if (depth <= 2){
50 ctx.strokeStyle = 'rgb(0,' + (((rand() * 64) + 128) >>0) + ',0)'
51 } else {
52 ctx.strokeStyle = 'rgb(' + (((rand() * 64) + 64) >>0) + ',50,25)'
53 }
如果是已经画到了最后两级，即为叶子，那么就rgb就为(0, 128~192, 0)(rgb代表颜色，分别为红绿蓝，red green blue)。还没的话，就在(64~128, 50 ,25)中取。大家可能发现了，rgb必须为整数，但是rand()只能rand实数。大家其实也注意到了有个” >>0″，js当中表示位运算，整体向右移动n位，0就是移动0位。其实它的作用和Math.floor()一样，但是速度更快。
动手画!
ctx.stroke()
这个线段就画好了，是时候准备下它的分叉的时候了。
newDepth = depth - 1
54 if (!newDepth)
55 return
如果这个线段是最后一级，就没有分叉了，也是一个递归的终止条件。
subBranches = (rand() * (maxBranch - 1)) + 1
56 branchWidth *= 0.7
57 for (var i = 0i <subBranchesi++){
58 newAngle = angle + rand() * maxAngle - maxAngle * 0.5
59 newLength = length * (0.7 + rand() * 0.3)
60 drawTree(ctx, endX, endY, newLength, newAngle, newDepth, branchWidth)
61 }
分叉数是1~3中的一个数。然后有多少个分叉，就画几条线段,newAngle为原角度调整90度之内，新长度为原长度的0.7~1.0之间。
最后画出主干，这棵树就可以开始画了。
drawTree(ctx, 320, 470, 60, -Math.PI / 2, 12, 12)
大家可能注意到角度为负，不符合传统观念。但你要知道，画布的纵坐标和传统的坐标轴正好是相反的。
好了，html5开发随机生成的大树代码就这样完成了，怎么样，一点都难吧！
1. 学习告一段落，可以多做几个项目。动手做项目的过程中可以发现自己学习过程中的不足。2. 做过一些项目之后，可以逐渐看一些设计、架构相关的书籍，比如设计模式。这些东西如果没有动手做过一定的项目，很难真正理解其中的精髓。
3. 对设计模式有所了解之后，可以多看一些优秀的开源源码。对自己的水平、眼界有很大的提高。
4. 有机会适当看看敏捷开发相关的书籍，同时对正规的需求分析文档、系统设计文档、测试文档的写法研究一下。这是实际项目开发工作中必不可少的内容，不要总是野路子开发。
5. 对项目管理的知识逐渐有所涉猎。
满意请采纳！
可以参考下面的路径去学习，祝你学有所成，公司最近在人工智能和自然语言处理的项目后端项目，我也是网上找了很多知识，最后给自己列了一个学习的目录，按照这个在复习并在总结，希望能帮到你：
计算机基本认知,环境搭建 python环境搭建
计算机基本认识,进制转换
python注释使用
python变量使用
python数据类型_Number
python数据类型 str字符串类型
容器类型数据list,tuple,str
容器类型数据set,dict
变量缓存机制
自动类型转换
Number强制类型转换
python运算符的使用 容器类型数据强制类型转换
字典强转等长二级容器
运算符_算数_比较
运算符_赋值_成员
运算符_身份_逻辑
运算符_位运算_优先级
python流程控制 代码块
流程控制if
多项巢状分支
循环结构while
循环判断经典题
字符串的相关操作
python循环结构
关键字continue_break_pass
for循环的遍历_range
字符串,列表内置方法
字符串函数
format字符串格式化
format特殊符号的使用
列表的操作
列表函数
字典,集合内置方法+文件操作
字典的相关函数
集合操作_函数
文件操作
文件加号模式
函数,函数参数 文件相关函数
函数
形参实参
默认形参_关键字形参
收集参数
命名关键字参数
全局/局部变量,闭包 return返回值
函数名的使用
局部变量_全局变量
函数的嵌套LEGB
关键字nonlocal
闭包函数
递归,匿名函数
locals和globals
闭包特点意义
递归含义
斐波那契_尾递归
匿名函数lambda
迭代器,高阶函数 迭代器
高阶函数_map
高阶函数_reduce
高阶函数_sorted
高阶函数_filter
推导式 列表推导式
推导式题
集合_字典推导式
生成器表达式
生成器函数
内置方法,linux基本命令 内置函数
可滑动序列
面试题演练
linux安装
linux基本命令
python模块 序列化模块
数学模块
随机模块
time模块
python模块 os模块
os_shutil
os.path模块
计算文件夹大小
zipfile
tarfile
导入模块包,oop面向对象认知
import_from绝对导入
import_from相对导入(单入口)
oop面向对象
类的封装性
oop之封装,继承 类的相关操作
对象和类的删除操作
单继承
多继承
菱形继承
oop之多态,魔术方法 多态
魔术方法__new__
单态模式
析构方法__del__
oop之魔术方法,异常处理 魔术方法__call__
魔术方法__str__repr__
魔术方法__bool_add_len__
了解异常
异常处理语法
主动抛出异常
装饰器
装饰器
静态绑定方法
property
正则表达式 单个字符匹配
多个字符匹配
匹配分组
命名分组
正则函数
正则计算器小程序
认识网络 bs_cs流程
传输数据流程
交换机和局域网的网络通讯
arp协议
认识tcp/udp协议
tcp基本语法
tcp循环发消息
udp基本语法
udp循环发消息
黏包
基于tcp协议下的应用 socketserver并发
文件校验
服务器合法性校验
tcp登录
并发编程之进程 进程
join
守护进程
lock锁
Semaphore
生产者消费者模型 Event事件
进程队列Queue
生产者和消费者模型
JoinableQueue
Manager.py
并发编程之线程
.线程
用类定义线程
守护线程
lock保证线程数据安全
信号量_Semaphore
死锁,互斥锁,递归锁
线程池,进程池,协成的使用
事件Event
线程队列
进程池和线程池
回调函数
协程
协程的爬虫案例
mysql安装(linux+windows+xshell+navicat)
掌握数据库mysql基本操作
mysql登录,服务启动
创建账户,用户授权
数据库,数据表,数据的增删改查
认识常用数据类型
数据库的存储引擎和约束
字段约束
约束的删减
存储引擎区别用法
数据表之间的关系
查询数据表
单表查询
多表联查
子查询
带EXISTS关键字的子查询
python操作mysql
python连接mysql的事务处理
sql注入
python连接mysql增删改查
mysql数据恢复
HTML/CSS html文档介绍，html标签，body标签，head标签介绍，head标签中的meta标签和link标签和title标签介绍，body中的标签分类，基础标签，img、a、列表、表格、input、label、select等标签,作业讲解，form标签介绍和示例讲解，css介绍，引入，css选择器，背景设置，高度宽度，字体效果，边框、盒子模型、display属性、float属性等
CSS 伪类选择器，文字装饰、a标签补充、定位、权重、小米商城导航栏讲解，原型头像示例讲解
JS基础/BOM和DOM操作 小米商城作业，js介绍和js引入，js数据类型、流程控制、函数等操作,js中的JSON，BOM对象的弹框、location对象、定时器、直接查找选择器、间接查找选择器、值操作、类值操作、样式操作、button按钮补充、事件和绑定事件的两种方式，常用事件练习
jQuery/Bootstrap 作业讲解，jquery介绍，引入、选择器、筛选器、值操作、文档操作、删除和清空标签、逻辑运算符、克隆、事件冒泡和事件委托、绑定事件的方式,作业讲解和模态对话框示例，input事件和页面载入事件补充、bootstrap介绍和引入、全局css样式、组件和常用插件
自定义web框架 作业讲解、web框架介绍、自定义web框架实现、动态页面、返回不同的html页面、函数版、多线程版、返回静态文件版，wsgiref版等web框架通过socket来实现，还有jinja2的简单使用
django下载安装和URL路由系统 django介绍、MTV和MVC框架介绍、常用指令、目录结构、pycharm创建django项目、request的常用属性介绍、登录示例、url路由系统介绍、有名分组和无名分组,
视图/模板 request对象的常用方法和属性、响应方法介绍和使用，CBV和FBV、CBV和FBV加装饰器，CBV源码讲解,模板渲染系统介绍，语法、简单示例、内置过滤器、for循环标签、if标签、with标签、自定义过滤器和标签、模板继承等
Dajngo的ORM(1) orm介绍，数据库同步指令使用和流程分析、配置连接mysql模型类中的属性介绍和常用参数说明，创建表和数据、增加的两种方法、删除、更新的两种方法、查询的13个api接口
Dajngo的ORM(2) 单表图书管理系统展示和添加作业讲解、choices属性、auto_now_add和auto_now参数讲解、url别名和反向解析，基于双下划线的模糊查询，多表结构介绍，图书管理系统编辑和删除作业讲解、多表关系模型类创建和字段说明和参数介绍、多表数据的添加操作，多表的删除和修改、基于对象的跨表查询、双下划线跨表查询、查看原生sql语句的方法、聚合查询、分组查询、F查询、Q查询等
Ajax与Django/ 中间件 ajax的介绍和简单示例，ajax登录示例、列表数据展示示例，ajax操作cookie的补充、中间件介绍、自定义中间件的方法、5个中间件方法的介绍和使用、基于中间件的session登录认证
cookie、session以及用户认证组件 cookie介绍，cookie的流程解析，django操作cookie和其他参数介绍、session的说明、django的session操作等，多表图书管理系统作业讲解
vue初识、es6基本语法、指令系统 let、const、v-if、v-for、v-html、v-text、v-model、v-show、生命周期钩子函数、
组件化开发、组件传值、axios简单使用 组件化开发、组件传值、axios简单使用、vue-router使用、vue-cli安装
项目初始化/首页 项目介绍、创建、初始化、element-ui的使用，单文件组件的使用和axios在单文件中的使用和配置、vue-cli的介绍和使用、路飞项目顶部导航栏页面效果搭建，轮播图组件的使用和调整、购物车页面搭建和课程详情页面搭建，vue-video-player视频播放插件
drf组件 序列化器、drf简单示例、restful规范、反序列化的校验机制
drf组件 apiview、request和response对象、modelserializer、序列化器保存数据、read_only和write_only的参数
drf组件 viewset、drf路由功能、viewset视图基类的使用、视图子类、通用视图类genericapiview/排序、django-filter过滤器、频率组件、分页组件、接口文档、异常处理、xadmin的安装和使用、认证组件和权限组件
git、消息队列 git企业中的使用模式，rabbimq消息队列的应用
rpc通信，grpc组件 rpc的概念以及通信模式，最火的grpc组件使用
轻量级Flask框架 Werkzeug服务介绍、Flask框架介绍
路由系统、自定义路由扩展
Cookie、Session、Http请求和响应
蓝图、消息闪现、中间件
Flask常用扩展、WTForms、使用SQLAchemy ORM
Admin、Restful、websocket原理、magic string, payload len,masking key
请求和上下文、多app应用、离线脚本、自定义扩展
服务端项目搭建，项目配置（session、数据库、日志相关），项目初始化
jsonrpc模块基本配置和使用，客户端展示首页及登录注册叶绵，APICloud页面控制管理
python进阶 并发、同步、异步、锁，线进程概念以及协程实现原理
mysql进阶课 基础知识梳理、索引、执行计划
mysql进阶课 存储引擎、日志管理、备份恢复、主从赋值、优化
redis，mongodb 事务和发布订阅、RDB和AOF持久化、缓存击穿、缓存雪崩等原理介绍、 用户管理和复制集(RS)总结、sharding cluster 分片集群的搭建、分片使用和相关策略等
算法与设计模式 链表、二叉树、常见算法、二分查找、插入排序、希尔排序、快排、堆排序、哈希查找
算法与设计模式 设计模式，单例模式、工厂模式、策略模式、观察者模式
算法与设计模式 leetcode经典算法解析
知识体系差不多就这么多了，再就是项目部分，具体项目要看需求了，学会了钓鱼的方法，不怕钓不到鱼哦，无论在哪个行业做什么样的项目都没问题呢！
我自己也搜集了一些经典的资料，要是想要加我百度网盘：艾美电商，我发给你！
