canvas--制作动画模拟重力加速度

最新推荐文章于 2025-07-07 11:32:04 发布

小水91

最新推荐文章于 2025-07-07 11:32:04 发布

阅读量941

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lsy__lsy/article/details/80350141

本文介绍了一个使用HTML5 Canvas实现的小球坠落并反弹的动画案例。通过设置加速度来模拟重力效果，使小球能够从指定高度落下并在触底时产生反弹。文章详细展示了如何利用JavaScript控制小球运动轨迹及速度变化。

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

示例：坠落的小球

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>border</title>
<style type="text/css">
#clock{ #border: 1px solid #333 }
</style>
</head>
<body>
<div class="">
<canvas id="canvas" width="1024" height="768" style=" border: 1px solid #aaa; display: block; margin:100px auto 0"></canvas>
</div>
<script>
var ball={
x:512, //x位置
y:100, //y位置
r:10, //半径
g:2, //加速度模仿重力加速度
vx:-4, //x方向的速度
vy:10, //y方向的速度
color:'#005588'
}
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=1024;
canvas.height=768;
var context=canvas.getContext('2d');
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.5
ball.vx=ball.vx*0.5
}
}
function render(cxt){
cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);
cxt.fillStyle=ball.color;
cxt.beginPath();
console.log(ball.x+','+ball.y+','+ball.r);
cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);

cxt.closePath();
cxt.fill()
}
</script>
</body>
</html>