<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas-小球抛物线</title>
</head>
<body>
<canvas id="canvas" width="1024px" height="768px;" style="border: 1px solid #000;"></canvas>
<script>
var ball = {x:512 , y:100 , r:20 ,g:2 , vx :-4 ,vy:0 , color:"#005588"}
window.onload = function(){
var canvas = document.getElementById('canvas');
canvas.width = 1024;
canvas.height = 768;
var cxt = canvas.getContext("2d");
setInterval(function(){
render(cxt);
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
}
}
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()
}
}
</script>
</body>
</html>