直接上代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>弹跳小球</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="500" style="display:block;margin: 0 auto;border: 1px solid red;background-color: aqua;" >
</canvas>
<script>
var ball={x:600,y:0,r:20,g:2,vx:-4,vy:-10,color:'pink'} //定义球的初始值g：加速度，vx:x轴方向的速度，vy:y轴方向的速度
//打开窗口后立即触发
window.οnlοad=function(){
var canvas=document.getElementById('myCanvas')
var context=canvas.getContext('2d')
setInterval(function(){
render(context)
run()
},50)
}
function render(cxt){
cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height)
//开始绘画
cxt.beginPath()
cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI)
cxt.fillStyle=ball.color
cxt.fill() //填充
}
function run(){
ball.x+=ball.vx
ball.y+=ball.vy
ball.vy+=ball.g
//y 大于canvas画布的高度时
if(ball.y>=500-ball.r){
ball.y=500-ball.r
ball.vy=-ball.vy*0.5
if(ball.x <=0){
ball.x =600;
ball.y = 0;
}
}
}
</script>
</body>
</html>
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
