投稿
  1. 首页
  2. 随笔

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

fragmented•2023-4-7•随笔•阅读20

html5 制作一颗3维的树 怎么能拖动树枝,第1张

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

用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)

}

}

运行代码：(查看效果）

你的意思是不是第二次点击没有效果啊？

因为你点击的效果被<div id="rr" onclick="tt('tt.png')">覆盖了，点半天都是这个点击效果

这样试试:

<html>

<head>

<title></title>

<script type="text/javascript" >

function tt(name )

{

var thm = "<div id=\"divv\" onclick=\"this.style.zIndex=0this.style.display='none'\" style=\"height : 400px width :600pxborder:solid 2px graybackground-color: gray"

+" zIndex:99 position :absolute\">"+"<img id=\"spic\" src=\""+name +"\""

+ " style=\"" + "height : 400pxwidth:400px" + "\" />"+"</div>"

document.getElementById("rr").innerHTML=thm

document.getElementById("rr").onclick = ''

}

</script>

<head>

<body>

<div id="rr" onclick="tt('tt.png')">

<img src="捕获.JPG"/>

</div>

</body>

</html>

步进电机老是一个角度来回摆动可能的原因是： 驱动频率细分设置不对； 驱动加速度设置不对；负载太大。 步进电机驱动器是一种将电脉冲转化为角位移的执行机构。当步进驱动器接收到一个脉冲信号，它就驱动步进电机按设定的方向转动一个固定的角度(称为“步距角”)，它的旋转是以固定的角度一步一步运行的。可以通过控制脉冲个数来控制角位移量，从而达到准确定位的目的；同时可以通过控制脉冲频率来控制电机转动的速度和加速度，从而达到调速和定位的目的。

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

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

赞 (0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
fragmentedfragmented一级用户组
00
上一篇 2023-04-07
下一篇2023-04-07

发表评论

登录后才能评论

评论列表（0条）

    保存