canvas学习（二）：弹跳小球

最新推荐文章于 2022-02-27 13:59:13 发布

wjiaoling136

最新推荐文章于 2022-02-27 13:59:13 发布

阅读量459

点赞数

分类专栏： canvas 文章标签：使用canvas制作弹跳小球

本文链接：https://blog.csdn.net/wjiaoling136/article/details/84808697

版权

canvas 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何利用HTML5的canvas元素创建一个模拟真实世界中弹跳小球效果的动画。小球在接触地面后会上弹，并随着每次弹跳逐渐降低高度，最终在地面上滚动。实现这一效果的关键在于准确地计算小球的运动轨迹和碰撞反弹的逻辑。

摘要由CSDN通过智能技术生成

效果类似于：将玻璃球摔在地上，小球往上弹，然后越弹越低，最后在地上滚动

页面结构就是在body中添加一个canvas标签，id为myCanvas。

js代码如下：

var WINDOW_Width=1024;//canvas的宽度
var WINDOW_HEIGHT=600;//canvas的高度

//定义小球的初始横坐标、纵坐标、半径、加速度、在x方向的速度、在y方向的速度、填充色
var ball={x:512,y:100,r:20,g:5,vx:-4,vy:0,color:"#005588"};
window.οnlοad=function(){
	var	myCanvas = document.getElementById("myCanvas");
	if(myCanvas.getContext("2d")){
		var context = myCanvas.getContext("2d");//获取绘图上下文环境
		//设置宽高
		myCanvas.width=WINDOW_Width;
		myCanvas.height=WINDOW_HEIGHT;

		setInterval(function(){
			render(context);//绘制小球
			update();//调整小球的坐标来更新小球状态，让其在画布中弹跳
		},50);
		
	}else{
		alert("当前浏览器不支持canvas标签");
	}
}
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();//为小球填充颜色
}

function update(){
	ball.x +=ball.vx;
	ball.y +=ball.vy;
	ball.vy +=ball.g;

	//判断小球是否碰壁，若是碰壁就减小y方向的高度，达到小球越跳越低的效果
	//600是前面设置的canvas的高度
	if(ball.y>=WINDOW_HEIGHT-ball.r){
		ball.y=WINDOW_HEIGHT-ball.r;
		ball.vy = -ball.vy*0.5;//慢慢降低弹跳小球的高度，达到小球越跳越低的效果
	}
}