[js高手之路]html5 canvas动画教程 - 重力、摩擦力、加速、抛物线运动
上节，我们讲了匀速运动，本节分享的运动就更有意思了：
- 加速运动
- 重力加速度
- 抛物线运动
- 摩擦力
加速运动:
<head>
<meta charset='utf-8' />
<style>
#canvas {
border: 1px dashed #aaa;
}
</style>
<script src="./ball.js"></script>
<script>
window.onload = function () {
var oCanvas = document.querySelector("#canvas"),
oGc = oCanvas.getContext('2d'),
width = oCanvas.width, height = oCanvas.height,
ball = new Ball( 0, height / 2 ),
vx = 0,
ax = 0.1;
(function linear() {
oGc.clearRect(0, 0, width, height);
ball.fill( oGc );
ball.x += vx;
vx += ax;
requestAnimationFrame(linear);
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="1200" height="600"></canvas>
</body>
加速度分解与合成
<head>
<meta charset='utf-8' />
<style>
#canvas {
border: 1px dashed #aaa;
}
</style>
<script src="./ball.js"></script>
<script>
window.onload = function () {
var oCanvas = document.querySelector("#canvas"),
oGc = oCanvas.getContext('2d'),
width = oCanvas.width, height = oCanvas.height,
ball = new Ball( 0, 0 ),
a = 0.3,
ax = a * Math.cos( 25 * Math.PI / 180 ),
ay = a * Math.sin( 25 * Math.PI / 180 ),
vx = 0,
vy = 0;
(function linear() {
oGc.clearRect(0, 0, width, height);
ball.fill( oGc );
ball.x += vx;
ball.y += vy;
vx += ax;
vy += ay;
requestAnimationFrame(linear);
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="1200" height="600"></canvas>
</body>
抛物线运动：
<head>
<meta charset='utf-8' />
<style>
#canvas {
border: 1px dashed #aaa;
}
</style>
<script src="./ball.js"></script>
<script>
window.onload = function () {
var oCanvas = document.querySelector("#canvas"),
oGc = oCanvas.getContext('2d'),
width = oCanvas.width, height = oCanvas.height,
ball = new Ball( 0, height / 2 ),
vy = -10,
vx = 5,
gravity = 0.2;
(function linear() {
oGc.clearRect(0, 0, width, height);
ball.fill( oGc );
ball.y += vy;
ball.x += vx;
vy += gravity;
requestAnimationFrame(linear);
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="1200" height="600"></canvas>
</body>
重力弹跳:
<head>
<meta charset='utf-8' />
<style>
#canvas {
border: 1px dashed #aaa;
}
</style>
<script src="./ball.js"></script>
<script>
window.onload = function () {
var oCanvas = document.querySelector("#canvas"),
oGc = oCanvas.getContext('2d'),
width = oCanvas.width, height = oCanvas.height,
ball = new Ball( width / 2, 20 ),
vy = 0,
gravity = 0.2,
bounce = -0.6;
(function linear() {
oGc.clearRect(0, 0, width, height);
ball.fill( oGc );
ball.y += vy;
if ( ball.y > canvas.height - ball.radius ) {
ball.y = canvas.height - ball.radius;
vy *= bounce;
}
vy += gravity;
requestAnimationFrame(linear);
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="1200" height="600"></canvas>
</body>
抛物线与重力弹跳运动
<head>
<meta charset='utf-8' />
<style>
#canvas {
border: 1px dashed #aaa;
}
</style>
<script src="./ball.js"></script>
<script>
window.onload = function () {
var oCanvas = document.querySelector("#canvas"),
oGc = oCanvas.getContext('2d'),
width = oCanvas.width, height = oCanvas.height,
ball = new Ball( 0, height ),
vy = -10,
vx = 5,
gravity = 0.2,
bounce = -0.8;
(function linear() {
oGc.clearRect(0, 0, width, height);
ball.fill( oGc );
ball.y += vy;
ball.x += vx;
if ( ball.y > canvas.height - ball.radius ) {
ball.y = canvas.height - ball.radius;
vy *= bounce;
}
vy += gravity;
requestAnimationFrame(linear);
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="1200" height="600"></canvas>
</body>
摩擦力运动
<head>
<meta charset='utf-8' />
<style>
#canvas {
border: 1px dashed #aaa;
}
</style>
<script src="./ball.js"></script>
<script>
window.onload = function () {
var oCanvas = document.querySelector("#canvas"),
oGc = oCanvas.getContext('2d'),
width = oCanvas.width, height = oCanvas.height,
ball = new Ball( 0, height - 20 ),
vx = 20,
friction = 0.98;
(function linear() {
oGc.clearRect(0, 0, width, height);
ball.fill( oGc );
ball.x += vx;
vx *= friction;
requestAnimationFrame(linear);
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="1200" height="600"></canvas>
</body>
[js高手之路]html5 canvas动画教程 - 重力、摩擦力、加速、抛物线运动的更多相关文章
- [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果
备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...
- [js高手之路]html5 canvas动画教程 - 边界判断与反弹
备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的 ...
- [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标
有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...
- [js高手之路]html5 canvas动画教程 - 下雪效果
利用canvas,实现一个下雪的效果,我们先预览下效果: 我们先分析下这个效果: 1,随机产生雪花 2,雪花的产生不是同时产生,而是有先后顺序的 3,雪花怎么表示 4,怎么源源不断的下雪 5,雪花有大 ...
- [js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球
综合利用前面所学,实现一个绚丽的小球动画,这个实例用到的知识点,在我的博客全部都有,可以去这里查看所有的canvas教程 <head> <meta charset='utf-8' / ...
- [js高手之路] html5 canvas动画教程 - 匀速运动
匀速运动:指的是物体在一条直线上运动,并且物体在任何相等时间间隔内通过的位移都是相等的.其实就是匀速直线运动,它的特点是加速度为0,从定义可知,在任何相等的时间间隔内,速度大小和方向是相同的. < ...
- [js高手之路]html5 canvas动画教程 - 自己动手做一个类似windows的画图软件
这个绘图工具,我还没有做完,不过已经实现了总架构,以及常见的简易图形绘制功能: 1,可以绘制直线,圆,矩形,正多边形[已完成] 2,填充颜色和描边颜色的选择[已完成] 3,描边和填充功能的选择[已完成 ...
- [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
随机推荐
- Java数据结构和算法（十）——二叉树
接下来我们将会介绍另外一种数据结构——树.二叉树是树这种数据结构的一员,后面我们还会介绍红黑树,2-3-4树等数据结构.那么为什么要使用树?它有什么优点? 前面我们介绍数组的数据结构,我们知道对于有序 ...
- Solr服务在Linux上的搭建
一.系统环境 注:欢迎大家转载,非商业用途请在醒目位置注明本文链接和作者名dijia478即可,商业用途请联系本人dijia478@163.com. CentOS-6.7-i386-bin-DVD1 ...
- ASP.NET Core Web API下事件驱动型架构的实现（一）：一个简单的实现
很长一段时间以来,我都在思考如何在ASP.NET Core的框架下,实现一套完整的事件驱动型架构.这个问题看上去有点大,其实主要目标是为了实现一个基于ASP.NET Core的微服务,它能够非常简单地 ...
- poj 1797 Heavy Transportation（最大生成树）
poj 1797 Heavy Transportation Description Background Hugo Heavy is happy. After the breakdown of the ...
- HDoj-1042 大数阶乘
N! Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submis ...
- 学习日记之工厂方法模式和Effective C++
简单工厂模式VS工厂方法模式: 简单工厂模式:最大长处在于工厂类中必须包括必要的逻辑推断,依据client选择条件动态实例化相关类,对于client来说,去除了与详细产品的依赖. 工厂方法模式(Fac ...
- 兔子-ps抠图
介绍2种方法:1.用高速选择工具 2.用铅笔工具 1.高速选择后.ctrl+c复制,新建空白图片,粘贴进去 2.用钢笔工具在图像的边缘定出若二个点,确定完毕之后按crtl+回车键选择.然后复制,新建空 ...
- 海量日志采集系统flume架构与原理
1.Flume概念 flume是分布式日志收集系统,将各个服务器的数据收集起来并发送到指定地方. Flume是Cloudera提供的一个高可用.高可靠.分布式的海量日志采集.聚合和传输的系统.Flum ...
- 翻译：CREATE DATABASE语句
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...
- IDEA使用--字体、编码和基本设置
IDEA这么高端的工具之前只是断断续续使用了一下,因为项目的开发都是在eclipse上,每次学习IDEA的使用都得上网搜索半天,今天自己整理一下,方便以后查阅. IDEA版本15.0.4 字体 界面字 ...