[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这个点 ...
随机推荐
- NavMesh--导航网格寻路
一.概述: NavMesh是3D游戏世界中用于实现动态物体自动寻路的一种技术,他将游戏场景中复杂的结构组织关系简化为带有一定信息的网格, 进而在这些网格的基础上通过一些列的计算来实现自动寻路. 二.简 ...
- 大白话Vue源码系列(02)：编译器初探
阅读目录 编译器代码藏在哪 Vue.prototype.$mount 构建 AST 的一般过程 Vue 构建的 AST 题接上文,上回书说到,Vue 的编译器模块相对独立且简单,那咱们就从这块入手,先 ...
- 电脑创建WIFI/无线热点之后， 手机QQ能上浏览器不能上网
这个完全是个人经验,绝对原创,请尊重博主原创权,转载请注明转于此博客. 问题如题,大家电脑创建无线热点之后, 有的人手机会出现QQ,微信能上网, 但是浏览器或者基于浏览器的那些比如应用商店不能上网, ...
- UILabel 的使用
直接上代码: /* UILabel 使用 */ UILabel *aLable = [[UILabel alloc] initWithFrame:self.window.bounds]; aLable ...
- google C++编程风格指南之头文件的包括顺序
google C++编程风格对头文件的包括顺序作出例如以下指示: (1)为了加强可读性和避免隐含依赖,应使用以下的顺序:C标准库.C++标准库.其他库的头文件.你自己project的头文件.只是这里最 ...
- Codeforces Round #271 (Div. 2) F题 Ant colony（线段树）
题目地址:http://codeforces.com/contest/474/problem/F 由题意可知,最后能够留下来的一定是区间最小gcd. 那就转化成了该区间内与区间最小gcd数相等的个数. ...
- 被动式Telnet研究及实现(解决内外网远程维护的困难)-part A
欢迎转载.转载请保留原文链接:http://blog.csdn.net/mikulee/article/details/40149779 项目背景及需求: 近期公司有一个项目: 我们在一个arm主机上 ...
- 一 、Spring Boot 学习之项目搭建
一.简介 spring 官方网站本身使用Spring 框架开发,随着功能以及业务逻辑的日益复杂,应用伴随着大量的XML配置文件以及复杂的Bean依赖关系. 随着Spring 3.0的发布,Spring ...
- mysql与服务器之间的编码问题
1.之前在练习一个java web的项目时,mysql的编码设置正确,服务器的编码也设置正确,但向mysql中存储数据时,就会出现乱码问题,后来发现是mysql与服务器之间的编码设置问题,以下是mys ...
- MySQL 导入外部数据时报错：1153: Got a packet bigger than 'max_allowed_packet' 解决方案
MySQL 导入外部数据时报错:1153: Got a packet bigger than 'max_allowed_packet' 解决方案 zoerywzhou@163.com http://w ...