投稿
  1. 首页
  2. 随笔

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

西溪印象城•2023-3-20•随笔•阅读34

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

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

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

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

不懂想问详细可以私信我

主流浏览器对html5的支持情况：

（1）Chrome，Firefox：支持html5很多年，而且有自动升级，支持最好。

（2）Safari，Opera：同样支持html5很多年，支持也很好。

（3）IE：IE10起比较好了，之前很差。

资料来源航歌网，其他浏览器则根据内核为准。网上有专门的H5兼容性测试网站，由于回答策略的限制无法发送链接，自己找找就有了

FormFollowsFunction就是一个展示HTML5实现的网站，目前网站展示了14个作品，其中包括了交互 *** 作以及视觉效果。这些效果本身并不是一个完整的产品，但是加入到产品中就能让产品生色不少。以下是百分网小编搜索整理的关于14个基于HTML5实现的特效，供参考借鉴，希望对大家有所帮助!

1、散景(Bokeh)

一种图像的焦外效果，通过HTML5实现的这种效果可以加载在背景、字体浮现。

2、3D效果

3D西红柿罐头汤，可通过鼠标进行旋转 *** 作，同时底部有一个倒影效果，一个很优秀的交互效果示范。

3、宇宙全景图

设定整个宇宙的场景，可以用360度观察整个宇宙星云，这种实现方式呈现出的效果更接近Google的街景地图。

4、像素化效果

这种效果用于图片很有趣，而实际可利用到的领域，还有待探索。

5、螺旋效果

字体的旋转效果，简单的近乎一张GIF图片，不过通过对文章的替换，可以轻易的转换成各种各样的文案展示。

6、结晶化滤镜

通过鼠标可选择结晶化的范围，用于网页可对界面直接做出更多的交互视觉效果。

7、色相混合

随着鼠标移动而改变各个位置的色相，一种很简单就能汇聚用户视线的交互效果，不过在简单的背景才更能体现这种效果的价值。

8、翻转时钟

一种时钟的展示效果，结构非常简单，而看上去也很清晰明了，适合嵌入到很多不同的页面中作为实时时间的展示。

9、水纹倒影

一种视觉效果，在这个Demo中可以调节倒影波动的速度。这种效果适合制作Logo以及主页的展示。

10、自由落体

“下雨的人”展示了一种自由落体的效果，可以用鼠标条件调节飘落的角度，提供了一种带有物理效果的交互 *** 作。这种功能特别用于游戏。

11、水面波纹

同样是一种物理效果，可通过鼠标刺激水面波纹，在网页上就能轻松实现。

12、树的成长

一种应激 *** 作的交互方式，点击一次长出一棵树，可用于网页展示的附加效果。这种效果在视觉上有多种用法，网页、游戏都可以。

13、字母雨刷

在屏幕上扫除字母的雨刷效果，初次看见感觉像是网页刷新的过度画面。

14、渐显效果

通过一些杂乱无章的线逐渐显现出一幅画，中间的显现过程很适合作为网页加载的等待界面。

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

用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: 0left: 0

}

</style></head><body>

<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 = xvar 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(depth>0){

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(depth>0){

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(depth>0){

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(depth>0){

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)

}

}

运行代码：(查看效果）

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/zaji/6308927.html

赞 (0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
西溪印象城西溪印象城一级用户组
00
上一篇 2023-03-20
下一篇2023-03-20

发表评论

登录后才能评论

评论列表（0条）

    保存