html5树,html画树

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

html5能根据不同的数据控制一棵树的树干,树叶,树根,树枝的颜色、形状、数量多少

如果当做一物件的话，数就是物件本身，树干、树叶、树根、树枝都是树的属性

你可以依据这些属性，再判断是中给他不同的 css 样式，而通常会先定义好类别

最后用 javascript 依照个属性的不同，套上不同状态的类别

不懂想问详细可以私信我

相关问答

Q1: 如果是想学HTML5游戏开发，技能树怎么点

HTML5的学习内容

前端页面重构：PC端网站布局、HTML5+CSS3基础项目、WebAPP页面布局；

JavaScript高级程序设计：原生JavaScript交互功能开发、面向对象开发与ES5/ES6、JavaScript工具库自主研发；

PC端全栈项目开发：jQuery经典特效交互开发、HTTP协议，Ajxa进阶与后端开发、前端工程化与模块化应用、PC端网站开发、PC端管理信息系统前端开发；

移动端项目开发：Touch端项目、微信场景项目、应用Vue.js开发WebApp项目、应用Ionic开发WebApp项目、应用React.js开发WebApp；

混合（Hybrid）开发：各类混合应用开发；

NodeJS全栈开发：WebApp后端系统开发。

Q2: 如何去除html5爱心树表白代码的进入界面爱心边上的 come baby

F12 调试页面，Ctrl+F　搜索 Come Baby 找到它的位置，修改它，保存源码，重新运行

Q3: html5 制作一颗3维的树怎么能拖动树枝

站内搜索: （仅支持单关键字）

用HTML5 Canvas制作摆动的树

下载源代码

〖作者：cyclegtx 〗〖发布日期：2014-07-05 〗

根据工作的需要，制作一个摆动的树做为页面的背景。为了增加页面的交互性，我又为背景中的树增加了鼠标（触控）事件，使他能够根据鼠标（触控）做出相应的动作，当手指做上下或者左右滑动的时候树会跟着摆动。先看看最终效果。

Step1.完成HTML页面，新建一个Tree类

完成HTML页面后新建一个Tree类用来记录树的各个属性。其中x,y为树根部的坐标值，branchLen,branchWidth分别是树枝的长度与宽度，depth为树枝的层数，canvas用来接页面中的canvas元素（默认是ID为canvas的元素）。

html

meta charset="utf-8" /

head

style

body {

margin: 0;

background: #7ACFFA;

}

#canvas {

position: absolute;

top: 0; left: 0;

}

/style/headbody

canvas id="canvas" width="1" height="1"/canvas

script type='text/javascript'

window.requestAnimFrame = (function(){

return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

function( callback ){

window.setTimeout(callback, 1000 / 60);

};

})();

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

function Tree(x,y,branchLen,branchWidth,depth,canvas){

this.canvas = canvas || document.getElementById('canvas');

this.ctx = this.canvas.getContext('2d');

this.x = x||0;

this.y = y||0;

this.branchLen = branchLen||0;

this.branchWidth = branchWidth||0;

var depth = depth || 5;

}

/script

/body/html

Step2.添加drawRoot方法，用来绘制树干

首先在drawRoot中画第一个枝干。drawRoot的参数意义同上。并且在Tree类的构造函数中运行drawRoot并把Tree接受到的参数传入。最后new一个Tree类，使树根位于屏幕的底部正中心，树枝长100px，树枝宽度为8px，树枝层数为8层（暂时用不上）。

var atree = new Tree(canvas.width/2-4,canvas.height,100,8,8,canvas);

在drawRoot中我们需要用lineTo()画出树枝。树枝的起始的坐标值(x,y)已经给出，结束的坐标值(toX,toY)需要进行计算。第一个画的是树干，由于树干垂直于地面所以结束坐标toX等于初始坐标x,而结束坐标toY等于初始y减去树干长度branchLen(注意坐标的0,0点在canvas的左上角)。

var toX = x;var toY = y-branchLen;

function Tree(x,y,branchLen,branchWidth,depth,canvas){

this.canvas = canvas || document.getElementById('canvas');

this.ctx = this.canvas.getContext('2d');

this.x = x||0;

this.y = y||0;

this.branchLen = branchLen||0;

this.branchWidth = branchWidth||0;

var depth = depth || 5;

this.drawRoot(this.x,this.y,this.branchLen,this.branchWidth);

}

Tree.prototype.drawRoot = function(x,y,branchLen,branchWidth){

var toX = x;

var toY = y-branchLen;

this.ctx.save();

this.ctx.strokeStyle="rgba(37, 141, 194, 0.93)";

this.ctx.beginPath();

this.ctx.lineCap = "butt";

this.ctx.lineJoin="round";

this.ctx.lineWidth = branchWidth;

this.ctx.moveTo(x,y);

this.ctx.lineTo(toX,toY);

this.ctx.closePath();

this.ctx.stroke();

this.ctx.restore();

}

var atree = new Tree(canvas.width/2-4,canvas.height,100,8,8,canvas);

运行代码：

Step3.添加drawBranch方法，用来绘制树枝

drawBranch同样是根据初始与结束坐标画出一条直线代表树枝。与树干不同的是树枝不再是垂直与地面而是与树干保持一定的角度，而且树枝的初始值是树干的结束点(toX,toY)。所以在drawBranch中我们加入新参数angle用来表示树枝与树干的垂直夹角α，这样就可以根据α算出toX与toY。请看图。

这样我们在画完树干后再分别画两个不同角度的树枝，一个是30°一个-30°。并将传给树枝的宽度branchWidth减小一个像素，使其与树干粗细不同。

Tree.prototype.drawRoot = function(x,y,branchLen,branchWidth){

var toX = x;

var toY = y-branchLen;

this.ctx.save();

this.ctx.strokeStyle="rgba(37, 141, 194, 0.93)";

this.ctx.beginPath();

this.ctx.lineCap = "butt";

this.ctx.lineJoin="round";

this.ctx.lineWidth = branchWidth;

this.ctx.moveTo(x,y);

this.ctx.lineTo(toX,toY);

this.ctx.closePath();

this.ctx.stroke();

this.ctx.restore();

this.drawBranch(toX,toY,branchLen,branchWidth-1,30);

this.drawBranch(toX,toY,branchLen,branchWidth-1,-30);

}

Tree.prototype.drawBranch = function(x,y,branchLen,branchWidth,angle){

var angle = angle || 0;

var radian = (90-angle)*(Math.PI/180);

var toX = x+Math.cos(radian)*branchLen;

var toY = y-Math.sin(radian)*branchLen;

this.ctx.save();

this.ctx.strokeStyle="rgba(37, 141, 194, 0.93)";

this.ctx.beginPath();

this.ctx.lineCap = "butt";

this.ctx.lineJoin="round";

this.ctx.lineWidth = branchWidth;

this.ctx.moveTo(x,y);

this.ctx.lineTo(toX,toY);

this.ctx.closePath();

this.ctx.stroke();

this.ctx.restore();

}

运行代码：

Step4.修改drawBranch函数，重复画树枝

在drawBranch函数的最后再次调用两次drawBranch

this.drawBranch(toX,toY,branchLen,branchWidth-1,angle+30);

this.drawBranch(toX,toY,branchLen,branchWidth-1,angle-30);

使其调用自己完成递归,注意这里传入的角度是在之前的角度的基础上在增加或者减少30度。

为了使递归停下来我们需要一个停止条件，就是之前一直没有用到的depth参数。我们在每次画下一层之前使其减1表示已经完成了一层树枝的绘制，直至depth减小到0表示绘制完所有的层数。

function Tree(x,y,branchLen,branchWidth,depth,canvas){

this.canvas = canvas || document.getElementById('canvas');

this.ctx = this.canvas.getContext('2d');

this.x = x||0;

this.y = y||0;

this.branchLen = branchLen||0;

this.branchWidth = branchWidth||0;

var depth = depth || 5;

this.drawRoot(this.x,this.y,this.branchLen,this.branchWidth,depth);

}

Tree.prototype.drawRoot = function(x,y,branchLen,branchWidth,depth){

var toX = x;

var toY = y-branchLen;

var depth = depth||5;

this.ctx.save();

this.ctx.strokeStyle="rgba(37, 141, 194, 0.93)";

this.ctx.beginPath();

this.ctx.lineCap = "butt";

this.ctx.lineJoin="round";

this.ctx.lineWidth = branchWidth;

this.ctx.moveTo(x,y);

this.ctx.lineTo(toX,toY);

this.ctx.closePath();

this.ctx.stroke();

this.ctx.restore();

depth--;

if(depth0){

this.drawBranch(toX,toY,branchLen,branchWidth-1,30,depth);

this.drawBranch(toX,toY,branchLen,branchWidth-1,-30,depth);

}

Tree.prototype.drawBranch = function(x,y,branchLen,branchWidth,angle,depth){

var angle = angle || 0;

var radian = (90-angle)*(Math.PI/180);

var toX = x+Math.cos(radian)*branchLen;

var toY = y-Math.sin(radian)*branchLen;

this.ctx.save();

this.ctx.strokeStyle="rgba(37, 141, 194, 0.93)";

this.ctx.beginPath();

this.ctx.lineCap = "butt";

this.ctx.lineJoin="round";

this.ctx.lineWidth = branchWidth;

this.ctx.moveTo(x,y);

this.ctx.lineTo(toX,toY);

this.ctx.closePath();

this.ctx.stroke();

this.ctx.restore();

depth--;

if(depth0){

this.drawBranch(toX,toY,branchLen,branchWidth-1,angle+30,depth);

this.drawBranch(toX,toY,branchLen,branchWidth-1,angle-30,depth);

}

运行代码：

由于树之间角度过大，而且所有树枝长度都相等，看起来并不像一棵树。所以我们需要在Tree的构造函数中加入几个参数用来调整树的姿态。

function Tree(x,y,branchLen,branchWidth,depth,canvas){

......

this.branchLenFactor = 0.8;

this.rootLenFactor = 1.2;

this.branchAngle = 20;

......

}

branchLenFactor:画每一层树枝的时候乘在branchLen上面，用来控制树枝长度。rootLenFactor:画树根的时候乘在branchLen上面，用来控制树根长度。branchAngle: 用来控制树枝之间的角度

Tree.prototype.drawRoot = function(x,y,branchLen,branchWidth,depth){

var toX = x;

var toY = y-branchLen*this.rootLenFactor;

var depth = depth||5;

this.ctx.save();

this.ctx.strokeStyle="rgba(37, 141, 194, 0.93)";

this.ctx.beginPath();

this.ctx.lineCap = "butt";

this.ctx.lineJoin="round";

this.ctx.lineWidth = branchWidth;

this.ctx.moveTo(x,y);

this.ctx.lineTo(toX,toY);

this.ctx.closePath();

this.ctx.stroke();

this.ctx.restore();

depth--;

if(depth0){

this.drawBranch(toX,toY,branchLen*this.branchLenFactor,branchWidth-1,this.branchAngle,depth);

this.drawBranch(toX,toY,branchLen*this.branchLenFactor,branchWidth-1,-this.branchAngle,depth);

}

Tree.prototype.drawBranch = function(x,y,branchLen,branchWidth,angle,depth){

var angle = angle || 0;

var radian = (90-angle)*(Math.PI/180);

var toX = x+Math.cos(radian)*branchLen;

var toY = y-Math.sin(radian)*branchLen;

this.ctx.save();

this.ctx.strokeStyle="rgba(37, 141, 194, 0.93)";

this.ctx.beginPath();

this.ctx.lineCap = "butt";

this.ctx.lineJoin="round";

this.ctx.lineWidth = branchWidth;

this.ctx.moveTo(x,y);

this.ctx.lineTo(toX,toY);

this.ctx.closePath();

this.ctx.stroke();

this.ctx.restore();

depth--;

if(depth0){

this.drawBranch(toX,toY,branchLen*this.branchLenFactor,branchWidth-1,angle+this.branchAngle,depth);

this.drawBranch(toX,toY,branchLen*this.branchLenFactor,branchWidth-1,angle-this.branchAngle,depth);

}

运行代码：(查看效果）

Q4: html5中怎么在canvas中画一个二叉树

用html5开发随机生成的大树，你应该没想到40+行代码就可以搞定了吧~接下来就跟大家说说这棵大树是如何在html5开发中实现的。

同样必须要有html容器。新建Index.html，代码如下:

、html

1 、head

2 、meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /

3 、titlecanvas 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 = 0; i subBranches; i++){

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 = 0; i subBranches; i++){

58 newAngle = angle + rand() * maxAngle - maxAngle * 0.5;

59 newLength = length * (0.7 + rand() * 0.3);