您的位置：首页 > 其它

Canvas绘制平抛小球效果

2016-09-11 16:41 357 查看

4000

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas {
border-bottom: 10px solid orange;
}
</style>
</head>

<body>
<canvas id="space" width="1200" height="500"></canvas>
<script type="text/javascript">
var myCanvas = document.getElementById("space");
var ctx = myCanvas.getContext("2d");
var x = 10,y = 10;
var g = 9.8 / 100,
t = -0.85,
v = 0;
function freeFall() {
ctx.clearRect(0, 0, 1200, 500);
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();
v += g;
y += v;
x += 1;
if(y >= myCanvas.height - 10) {
y = myCanvas.height - 10;
v *= t;
}
if(x >= 1190) {
x = 1190;
window.location.reload()
}
window.requestAnimationFrame(freeFall);
}
freeFall()
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航