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

示例:坠落的小球

<!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>

阅读更多
想对作者说点什么? 我来说一句

用EXCEL计算重力加速度

2013年01月21日 21KB 下载

重力加速度计算工具

2018年02月25日 3.97MB 下载

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭