canvas动画

最新推荐文章于 2020-06-29 14:02:45 发布

原创最新推荐文章于 2020-06-29 14:02:45 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

canvas 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何利用HTML5的Canvas元素结合JavaScript实现简单的动画效果，包括球体的运动和碰撞处理，通过定时器setInterval更新画面，展示了基本的物理运动规律。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setInterval(
   function(){//函数表示每一帧干什么
       render();
       update();
   },50//时间每隔多长时间毫秒
);

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<canvas id="canvas" style="display: block;margin: 50px auto;">
		
	</canvas>
				
</body>
</html>

<script type="text/javascript">
		var ball = {x:512,y:100,r:20,g:2,vx:-4,vy:0,color:'#005588'};
		window.onload=function(){
			var canvas = document.getElementById('canvas');

			var context = canvas.getContext('2d');

			canvas.width = 1024;
			canvas.height = 768;

			setInterval(
				function(){//函数表示每一帧干什么
					render(context);
					update();
				},50//时间每隔多长时间
			);

		}
		function update(){
			ball.x += ball.vx;
			ball.y += ball.vy;
			ball.vy += ball.g;
			if(ball.y>=768-ball.r){
				ball.y = 768-ball.r;
				ball.vy = -ball.vy*0.8;
			}
		}
		function render(cxt){
			cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);

			cxt.fillStyle = ball.color;

			cxt.beginPath();

			cxt.arc (ball.x,ball.y,ball.r,0,2*Math.PI);
			cxt.closePath();
			cxt.fill();
		}
	</script>