<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>无标题文档</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function menus(str,picId){
var obj, pic
// 返回 str 对象和 picId 对象是否存在
if (document.getElementById(str) &&document.getElementById(picId)){
obj=document.getElementById(str)//obj 为 DIV 对象
pic=document.getElementById(picId)//pic 为 图片对象
if (obj.style.display == "none"){ //如果DIV对象的 display 样式值为 none 的话
obj.style.display = ""//就将 display 的样式清空
pic.src = "0001.jpg"//更改图片对象的路径
}else{
obj.style.display = "none"
pic.src = "0000.jpg"
}
}
}
//-->
</script>
<style type="text/css">
<!--
.div1 {
cursor: hand
width: 100px
}
.div1_1{
cursor: hand
width: 100px
color: #666666
font-size: 14px
}
.div2 {
color: #666666
font-size: 12px
}
-->
</style>
</head>
<body>
<!--第一列的树-->
<div onClick="menus('menu1', 'pic1')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic1">语文</div>
<div id="menu1" style="display:none" class="div2">
<div onClick="menus('menu1_1', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1">文言文</div><br/>
<div id="menu1_1" style="display:none" class="div2">
文言文1
</div>
<div onClick="menus('menu1_2', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1">作文</div>
<div id="menu1_2" style="display:none" class="div2">
作文1
</div>
<div onClick="menus('menu1_3', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1">语法</div>
<div id="menu1_3" style="display:none" class="div2">
语法1
</div>
</div>
<!--第二列的树-->
<div onClick="menus('menu2', 'pic2')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic2">数学</div>
<div id="menu2" style="display:none" class="div2">
代数<br/>
几何<br/>
</div>
<!--第三列的树-->
<div onClick="menus('menu3', 'pic3')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic3">副科</div>
<div id="menu3" style="display:none" class="div2">
地理<br/>
生物<br/>
历史<br/>
</div>
<div onClick="menus('menu4', 'pic4')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic4">副科</div>
<div id="menu4" style="display:none" class="div2">
地理<br/>
生物<br/>
历史<br/>
</div>
</body>
</html>
用html5开发随机生成的大树，你应该没想到40+行代码就可以搞定了吧~接下来就跟大家说说这棵大树是如何在html5开发中实现的。同样必须要有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开发随机生成的大树代码就这样完成了，怎么样，一点都难吧！
dom树是属于javascript的一部分,javascript大体包含3个西:ECMAScript语法(在此基础上建立的javascript语法,还如FLASH的ActionScript也基于ECMAScript扩展的),DOM对象（文档），BOM对象（浏览器）. 而DOM对象的出现是为了方便javascript操作HTML标签而已.BOM对象也就是操作浏览器了.标准的HTML文档实质上就是一个是就一个树形结构的XML文档 DOM全名document object model 文档对象模型，也就是基于HTML文档出来的，所以操作DOM实际上就是在操作HTML文档对象(每一个标签). CSS只能修饰HTML的样式而已，而javascript能把HTML与CSS相结合，也就是以前所说的DHTML（动态HTML）。 http只是传输协议，没他的话网站都打不开了。 html这套标签机制也是又W3C规范的，每个浏览器对CSS，HTML，JS的解析都存在问题，所以当时就出现了W3C这个民间的组织，重点是民间组织，O(∩_∩)O哈哈~，组成就是为了说服各大浏览器厂商统一解析CSS，HTML，JS,目前各大浏览器厂商对标准支持的越来越好了（IE最差，可能有钱有势吧，老弄些IE特有属性与方法，而不采用DOM核心方法），但是还是存在差异，希望开发者再也不用为浏览器兼容考虑那一天的到来。
