[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这个点 ...
随机推荐
- tyvj4865 天天和树tree
#include<bits/stdc++.h> #define MAXN 100000+10 using namespace std; *MAXN]; ,head[MAXN],pre[MA ...
- centos yum安装ffmpeg
ffmpeg是一个重要的应用软件,用于执行与视频文件转换成不同的视频流格式的视频站点,能够安装在linux系统上来使用 (一)安装编译环境 #yum install -y automake auto ...
- ImageLoader配置（凝视）
/** * 配置ImageLoader */ private void configImageLoader() { File discCacheDir = StorageUtils.getOwnCac ...
- JavaScript 定义类的最佳写法——完整支持面向对象（封装、继承、多态），兼容所有浏览器，支持用JSDuck生成文档
作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...
- 自学Python1.2-环境的搭建：Pycharm及python安装详细教程
Python几乎可以在任何平台下运行,如我们所熟悉的:Windows/Unix/Linux/Macintosh 一.windows下安装Python 1. 从python官方网站:http://www ...
- springMVC学习总结（一）快速入门
springMVC学习总结(一)快速入门 一.初步认识 springMVC执行流程 主要组件 DispatcherServlet(中央控制器) 配置在web.xml中的前端控制器,客户端请求的入口,调 ...
- 应用activeMQ消息中间件同步索引库
mq是一个消息服务器: 安装包内置了tomcat,直接登录访问,登录:http://ip:8161/admin/ (相当于dubbo的moniter监控中心) admin admin传统串行化, ...
- Swift3.0 自定义tableView复用cell 的写法，与CollectionViewCell的不同,数据model
Model数据 class HospitalModel: NSObject { //后边不赋值 会报错 var imgurl :String = "" var introducti ...
- ES6 Proxy和Reflect（下）
construct() construct方法用于拦截new命令. var handler = { construct (target, args) { return new target(...ar ...
- Java 浮点型与双精度数值比较
对于双精度与浮点数之间的比较存在潜在的转化