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

最新推荐文章于 2023-11-22 17:14:37 发布

笑起来贼好看

最新推荐文章于 2023-11-22 17:14:37 发布

阅读量2.4k

点赞数 1

文章标签： javascript html 三维动画 canvas

本文链接：https://blog.csdn.net/u013412066/article/details/44466067

版权

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

<!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.οnlοad=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="" />

笑起来贼好看

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫