第五讲：使用html5中的canvas动态画出物理学上平抛运动
<html>
<head>
<title>平抛运动</title>
<script src="../js/jscex.jscexRequire.min.js" type="text/javascript"></script>
</head> <body>
<canvas id="mc" width="900px" height="500px">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('mc');
var cxt = canvas.getContext('2d');
//定义一个小球
var balls = [];
balls.length = 0;
//先定义两个球
var ball_1 = {//平抛运动的球
x:70,
y:50,
r:15,
vx:600,//设置其水平方向的速度为600
vy:0
};
var ball_2 = {//自由落体运动的球
x:50,
y:50,
r:15,
vx:0,
vy:0
};
balls.push(ball_1);
balls.push(ball_2);
var cyc = 10;
var a = 10; //重力加速度
//绘制画布
cxt.fillStyle = "#030303";
cxt.fillRect(0,0,canvas.width,canvas.height);
var somethingAsync = eval(Jscex.compile("async", function () {
while (true) {
cxt.fillStyle = "rgba(0,0,0,.3)";
cxt.fillRect(0,0,canvas.width,canvas.height);
cxt.fillStyle = "#fff";
for(var i in balls){
cxt.beginPath();
cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
balls[i].y += balls[i].vy * cyc / 1000;
balls[i].x += balls[i].vx * cyc / 1000;
//当球触碰地面
if (balls[i].r + balls[i].y >= canvas.height) {
if (balls[i].vy > 0) {
balls[i].vy *= -0.9;//在y轴方向的速度降低 相当于能量消失一部分仅仅保留0.7
}
}
else {
balls[i].vy += a;//加上两个球在 地面方向的加速度
}
//当球触碰左右两墙壁
if(balls[i].x >= canvas.width || balls[i].x < balls[i].r){
balls[i].vx *= -1;
}
}
$await(Jscex.Async.sleep(cyc));
}
}));
somethingAsync().start();
</script>
</body>
</html>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1bWluZ21fbXVzaWM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
第五讲：使用html5中的canvas动态画出物理学上平抛运动的更多相关文章
- HTML5中的canvas基本概念及绘图
* Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的 ...
- 【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
- 第七讲：HTML5中的canvas两个小球全然弹性碰撞
<html> <head> <title>小球之间的碰撞(全然弹性碰撞)</title> <script src="../js/jsce ...
- HTML5 中的 canvas 画布（一）
---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...
- HTML5中的Canvas详解
什么是Canvas HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图 ...
- HTML5中的 Canvas
什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...
- HTML5中的Canvas和SVG
Canvas 和 SVG 都允许我们在浏览器中创建图形,但是它们在根本上是不同的. 1 SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中 ...
- HTML5 中的 canvas 画布（二）
绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image(); // 先创建图片对象 image.src = '图片的 ...
- HTML5中的Canvas
1.Canvas标签的宽高一定要设置在标签上或者采用js添加属性,如果用css去设置的话,会把画布被拉伸,相当于将默认的画布拉伸到指定位置.默认为300px*100px; <canvas wid ...
随机推荐
- 输入3个数a,b,c，按大小顺序输出。
题目:输入3个数a,b,c,按大小顺序输出. 思路: 根据最简单的, 经典的C语言算法, 两两相互交换得到他们的顺序 public class 第三十四题abc三个数大小排序 { public sta ...
- Eclipse Code Recommenders 自动补全(联想)神器
Eclipse Code Recommenders 可以在eclipse市场中下载.自动补全.模糊匹配.非常有用!
- 第1节 flume：7、flume的监控文件夹，实现数据收集到hdfs上
1.2.2 采集案例 1.采集目录到HDFS 需求分析 结构示意图: 采集需求:某服务器的某特定目录下,会不断产生新的文件,每当有新文件出现,就需要把文件采集到HDFS中去 根据需求,首先定义以下3大 ...
- xmind 8 安装后启动失败(未提示错误信息)
xmind 8 安装后启动失败 前言 家里的计算机也安装了xmind,启动之后界面显示xmind的启动图标,几秒之后启动图标消失(闪退了),然后留我一脸懵逼.想着卸载了安装一个新的应该没有问题 ...
- 【问题探索日志】python 函数优化
# 事情是这样的,我写的一个程序帧率上不去. 然后发现了一个疑似有问题的地方,如下 def around(x,y): around_dict = {(i,j) for i in range(-1,2) ...
- 嵩天老师的零基础Python笔记：https://www.bilibili.com/video/av13570243/?from=search&seid=15873837810484552531 中的1-14讲
#coding=gbk#嵩天老师的零基础Python笔记:https://www.bilibili.com/video/av13570243/?from=search&seid=1587383 ...
- JSP配置即报错以及解决办法(未更新完)
JSP: JAVA Server Page 使用JAVA语言编写的一种在服务器运行的动态页面 JSP = JAVA + HTML JSP 的执行过程 1: 翻译阶段 把JSP源文件翻译成 java ...
- [AI开发]基于DeepStream的视频结构化解决方案
视频结构化的定义 利用深度学习技术实时分析视频中有价值的内容,并输出结构化数据.相比数据库中每条结构化数据记录,视频.图片.音频等属于非结构化数据,计算机程序不能直接识别非结构化数据,因此需要先将这些 ...
- BNU 4346 Scout YYF I
A. Scout YYF I Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld Java cla ...
- SQL中varchar和nvarchar的基本介绍及其区别
SQL中varchar和nvarchar的基本介绍及其区别 varchar(n) 长度为 n 个字节的可变长度且非 Unicode 的字符数据.n 必须是一个介于 1 和 8,000 之间的数值.存储 ...