用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)
}
}
运行代码：(查看效果）
页面渲染主要经过过程，具体介绍如下：
字节 → 字符 → 令牌 → 节点 → 对象模型
CSS树的生成和DOM树的生成基本是相同，如下
为什么会有CSS树
因为CSS关系也会有父子关系，就是css中常说的继承，一些样式如font-size等子元素会继承父级，所以会生成一套对应的CSS树和DOM树相对应。
通过上面的页面渲染介绍，很容易理解，重排就是重新布局页面结构，计算节点位置，而重绘就是绘制页面，只是一些样式如背景，颜色的变化等，不需要重新计算位置布局，所以 重排一定会导致重绘，但是重绘不一定导致重排。
导致页面重排主要有以下几点
上文中触发了四次重排，通过上文介绍，offsetTop，scrollTop，clientTop等属性的修改会触发重排，当浏览器获取DOM样式的时候立刻会执行一次重排，因为需要计算浏览器位置坐标，不会再继续观察下文是否还有DOM的 *** 作，下文介绍浏览器渲染机制。
这种情况看似会触发四次重排，实际只会触发一次重排，现代浏览器基本都有渲染机制，浏览器会批量将样式修改一次性执行，批量修改完后再批量获取DOM位置，实际只触发一次。
等价于
通过上文，容易理解这种情况会触发两次重排，可以使用缓存（实际是分离读写）来优化。
这种情况会触发五次重排
避免设置大量的style属性，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow，所以最好是使用class属性实现元素的动画，设置position属性，最好是设为absoulte或fixed，脱离文档流，这样不会影响其他元素的布局。
事件委托原理：利用事件冒泡的特性，子元素都会冒泡到父元素上，当子元素如（li）元素都绑定事件时，可以只需绑定父元素（ul）来达到相同的效果，这样不仅减少了对dom的 *** 作，减少重排或重绘，而且不用分配大量变量来保存dom，减少了内存。
委托
不要使用table布局，因为table中某个元素一旦触发了reflow，那么整个table的元素都会触发reflow。那么在不得已使用table的场合，可以设置table-layout:auto或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。
不要一个个修改属性，应通过一个class来修改
改为
参考文献
https://blog.csdn.net/b954960630/article/details/82317999
如果当做一物件的话，数就是物件本身，树干、树叶、树根、树枝都是树的属性你可以依据这些属性，再判断是中给他不同的 css 样式，而通常会先定义好类别
最后用 javascript 依照个属性的不同，套上不同状态的类别
不懂想问详细可以私信我
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）