canvas动画

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>	

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Canvas中实现动画分层,可以通过多个图层来完成。每个图层可以独立地绘制和更新,并按照特定的顺序叠加在一起。这样可以实现更复杂的动画效果。 要实现动画分层,可以使用以下步骤: 1. 创建多个Canvas元素:根据需要的图层数量,创建相应数量的Canvas元素。可以使用HTML的canvas标签创建Canvas元素,并设置它们的宽度和高度。 2. 设置Canvas元素的位置和样式:使用CSS来设置每个Canvas元素的位置和样式。可以使用绝对定位或其他方法将它们正确地叠加在一起,并覆盖在同一个位置上。 3. 绘制每个图层:为每个Canvas元素创建一个对应的上下文对象(context),并使用该上下文对象绘制对应的图层内容。可以使用绘图API(如绘制矩形、绘制路径等)和图像等方法来绘制所需的内容。 4. 更新图层和动画:使用定时器或requestAnimationFrame等机制来更新每个图层的状态和动画效果。通过更新图层内容并重新绘制,可以实现动画效果。 5. 叠加图层:将每个Canvas元素按照需要的顺序叠加在一起。可以使用CSS的z-index属性来控制它们的叠加顺序。 示例代码如下: ```html <!DOCTYPE html> <html> <head> <style> #canvas1, #canvas2 { position: absolute; top: 0; left: 0; } </style> </head> <body> <canvas id="canvas1" width="500" height="500"></canvas> <canvas id="canvas2" width="500" height="500"></canvas> <script> // 获取Canvas元素和上下文对象 var canvas1 = document.getElementById("canvas1"); var ctx1 = canvas1.getContext("2d"); var canvas2 = document.getElementById("canvas2"); var ctx2 = canvas2.getContext("2d"); // 绘制第一个图层 function drawLayer1() { ctx1.clearRect(0, 0, canvas1.width, canvas1.height); // 绘制图层内容 ctx1.fillStyle = "red"; ctx1.fillRect(50, 50, 100, 100); } // 绘制第二个图层 function drawLayer2() { ctx2.clearRect(0, 0, canvas2.width, canvas2.height); // 绘制图层内容 ctx2.fillStyle = "blue"; ctx2.beginPath(); ctx2.arc(250, 250, 50, 0, Math.PI * 2); ctx2.fill(); } // 更新动画 function animate() { drawLayer1(); drawLayer2(); // 更新图层状态和动画效果 requestAnimationFrame(animate); } // 启动动画 animate(); </script> </body> </html> ``` 这样,通过创建多个Canvas元素并按照需要绘制和更新每个图层,就可以实现Canvas动画分层效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值