如何用Html5中的canvas模拟三维小球运动动画

如何用Html5中的canvas模拟三维小球运动动画,第1张

下面详细解释都在源码中:

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>#canvas{ background:#eee}</style></head><body><canvas id='canvas' width="500" height='500'></canvas><script>window.onload=function(){ var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') //平移,主要是将坐标轴平移到中间,为了画圆定位方便 context.translate(250,250) //定义焦距 var fos = 300 //存放小球的数组 var arr = [] for(var i = 0 i <8 i++){ var arcObj = { //半径,用随机数目的是让每个小球大小不一 r:10+5*Math.random(), //起始X坐标 x:-200+i*30, //起始Y坐标 y:-100+200*Math.random(), //起始Z坐标,这里需要理解,我们要构造的是一个三维立体小球的运动 //则X,Y轴不能表达空间感,你需要充分的想象Z坐标轴是顺着你的眼睛的就是Z轴 z:i*10, //小球的运行速度 speed:20 } arr.push(arcObj) } setInterval(function(){ //清除画布,每次画之前先将上次的清除掉.然后绘出本次的,就可以形成动画效果. context.clearRect(-250,-250,500,500) //将arr排序,sort()的参数则是作为一种比较规则 var newArr = arr.sort(function (a,b){ return a.z >b.z }) //循环绘出刚才定义的几个小球 for(var i = 0 i <newArr.length i++){ //z轴的变化,每次变化都是 速度*时间+z = z由于speed未定义单位,则时间可忽略 arr[i].z += arr[i].speed //让小球来回d跳 if(arr[i].z >600 || arr[i].z <-50){ arr[i].speed *= -1 } //这里的缩放比例,一定要注意,你要想象你眼前有个球垂直从远处飞来,逐渐变大的过程,Z轴不断增加.焦距就想象成从最初你到球的距离,通过运动后,现在到球的距离和焦距就可以形成缩放比例. var scales = fos/(fos+arr[i].z) var x1 = arr[i].x*scales var y1 = arr[i].y*scales //保存之前的context绘图环境,即后续可以用context.restore方法可以恢复, //目的是让下面的context变化不影响其他的画图样式. context.save() //平移X,Y 也可以不用平移X,Y只要在下面的画圆中定义相应的X,Y也能达到相同的目的 context.translate(x1,y1) //将坐标轴缩放,目的是让小球的大小发生视觉上的变化. context.scale(scales,scales) context.beginPath() //定义放射性颜色渐变 var colorObj = context.createRadialGradient(0,0,0,0,0,arr[i].r) colorObj.addColorStop(0,'#cbc0f3') colorObj.addColorStop(1,'#06198b') context.fillStyle=colorObj context.arc(0,0,arr[i].r,0,Math.PI*2) context.fill() context.restore() } },50)}</script></body></html>

主要要理解焦距的概念,实际开发过程中,可能X轴,Y轴都有小球的运动速度分量,那才能在运动的过程中转弯,撞墙等特效.

1、球能够d起,是因为球在落地的瞬间要发生变形,这种变形是可以恢复的,就像d簧一样,当这种变形达到极限开始恢复的瞬间,该d性势能产生作用力,使球在该瞬间以【d力-重力】/质量的加速度向上d起,随着d性变形的恢复,该d力减小,当d力与重力相等的瞬间,球由加速向上运动变为减速运动,一直到回d的顶点。 在该过程中,能量转换时这样的:高度势能--动能--动能+高度势能+d性势能【接触地面瞬间】--d性势能【变形达到极限瞬间】--d性势能+动能+势能【离开地面之前】--动能+势能【离开地面瞬间】--势能+动能【到达最高点之前】--势能【达到顶点】 2、在该过程中由于风阻,球的变形以及地面的变形都使能量转换为非球拥有的其他能量,特别是地面的变形影响和球的材质决定的d性恢复系数,对地面的变形你可以看看电影《笑无极》里面玩鸟的片段,所以反d高度越来越小。 3、消耗的能量不是d性势能,d性势能是动能和势能转换过来的,在球下落过程中,消耗的是高度势能:高度势能转为动能+风能+与风摩擦的热能,在接触地面后,动能和高度势能转换为球的d性势能和地面的d性势能以及动能【动能减小直至为0】,所以该过程消耗的是动能和势能,在球d起过程中,势能转换为动能和高度势能,由于球的d性系数和地面的d性系数关系,在转换过程中势能不能完全转换为动能和势能,消耗一部分d性势能,就像非刚性的地面,如沙土,他是不能完全恢复的。所以在该过程中消耗的不能只说是那一种能量。 4、小球的d起高度与球的最初势能、物体的d性系数、地面的d性系数、球的密度、以及风阻有关,与密度有关的理解比较抽象,比方说在密度不同的情况下,相同质量相同高度的球具备相同的势能,但是在下降过程中密度小的体积大,受到的风阻就大,消耗的能量就多。

#include<stdio.h>

#include<math.h>

int main()

{int m,i

double sum=0,n

printf("输入小球落下的高度,小球反d次数:\n")

scanf("%lf %d",&n,&m)

sum+=n

for(i=0i<mi++)

{

   n=n/2.0

   printf("第%d次d跳%lf高\n",i+1,n)

   if(i<m-1)

   {

      sum+=n*2

 printf("d跳第%d次下一次没到,经过的路程: %lf\n",i+1,sum)

   }

   printf("\n")

}

   printf("前%d次d跳共经过:%lf\n",m,sum)

return 0

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8294427.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存