<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #ccc;"></canvas><!--是基于状态绘制的-->
<script>
//g是物理上的加速度 vx是x轴上的速度， vy是y轴上的速度 x:512,y:100初始位置
var ball={x:512,y:100,r:20,g:2,vx:-4,vy:-10,color:"#005588"}//这是第一个小球
window.onload=function(){//在window.onload调用这两步
var canvas = document.getElementById("canvas");
canvas.width=1024;
canvas.height=768;//与下文作用一样！不支持css来写
//获取他的上下文的绘图环境（这是初始化）注意引号
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 这是y轴上的速度改变方向*/
ball.vy = -ball.vy*0.5
}
}
function render(cxt){//通过上下文的绘图环境调用canvas方法。来找到这个绘图环境是属于那个环境。cxt.canvas render(cxt)中的cxt是context
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.fill()
}
</script>
</body>
</html>
下面是主要来创造动画的
setInterval(
function(){
render(context);
update()
},50
)