使用canvas画一个小球自由落体的效果
<!DOCTYPE html>
<html>
<head>
<title>小球自由落体</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 0;
}
html,
body {
position: relative;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
</body>
<script>
//获取屏幕参数
var Height = window.innerHeight;
var Width = window.innerWidth;
// 创建canvas
var canvas = document.createElement("canvas");
canvas.setAttribute("id", "ball");
document.body.appendChild(canvas);
canvas.setAttribute("height", Height);
canvas.setAttribute("width", Width);
var Ball;//创建实例
const STRATSPEED = 0;//初始速度
const ACCELERATION = 10;//加速度
const ANIMATESPEED = 0.5;//动画速度，数值越大运动越快，速度越小运动越慢
function initBall() {
//小球实例
Ball = {
color: "red",
radius: 20
}
Ball.y = Ball.radius;
Ball.x = Height / 2 + Ball.radius;
Ball.speed = STRATSPEED;
ctx.fillStyle = Ball.color;
}
function draw() {
ctx.beginPath();
ctx.arc(Width / 2, Ball.y, Ball.radius, 0, 2 * Math.PI);
ctx.fill();
}
function render() {
// 小球落地前自由下落
if (Ball.y < Height - 2 * Ball.radius) {
ctx.clearRect(0, 0, Width, Height);
Ball.y += Ball.speed * ANIMATESPEED + 0.5 * ACCELERATION * Math.pow(ANIMATESPEED, 2);
Ball.speed += ACCELERATION * ANIMATESPEED;
draw();
}
}
function animate() {
render();
window.requestAnimationFrame(animate);
}
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
initBall();
draw();
animate();
}
</script>
<script>
window.onresize = function () {
Height = window.innerHeight;
Width = window.innerWidth;
canvas.setAttribute("height", Height);
canvas.setAttribute("width", Width);
initBall();
draw();
}
</script>
</html>
-
本文向大家介绍C语言练习题:自由落体的小球简单实例，包括了C语言练习题:自由落体的小球简单实例的使用技巧和注意事项，需要的朋友参考一下 一球从100米高度自由落下，每次落地后反跳回原高度的一半；再落下，求它在第10次落地时，共经过多少米？第10次反弹多高？ 以上这篇C语言练习题:自由落体的小球简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍请使用canvas画一个椭圆相关面试题，主要包含被问及请使用canvas画一个椭圆时的应答技巧和注意事项，需要的朋友参考一下 <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ct
-
本文向大家介绍使用canvas画出一个矩形相关面试题，主要包含被问及使用canvas画出一个矩形时的应答技巧和注意事项，需要的朋友参考一下
-
本文向大家介绍js+html5实现的自由落体运动效果代码，包括了js+html5实现的自由落体运动效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js+html5实现的自由落体运动效果。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： 更多关于JavaScript运动相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》 希望本文所述对大
-
听起来对我来说很容易，直到我试过 这个实现使用了lib igl，但问题不在于我缺乏数学知识:-\
-
本文向大家介绍jQuery+canvas实现的球体平抛及颜色动态变换效果，包括了jQuery+canvas实现的球体平抛及颜色动态变换效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery+canvas实现的球体平抛及颜色动态变换效果。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery动画与