您的位置：首页 > Web前端 > HTML5

【html5】如何用Html5中的canvas模拟小球三维运动动画呢?

2015-03-19 22:08 411 查看

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

<!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;
//让小球来回弹跳
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轴都有小球的运动速度分量,那才能在运动的过程中转弯,撞墙等特效.

<img src="https://img-blog.csdn.net/20150319221212054" alt="" />

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航