<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动态画出物理学上平抛运动的更多相关文章

  1. HTML5中的canvas基本概念及绘图

    * Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的 ...

  2. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  3. 第七讲：HTML5中的canvas两个小球全然弹性碰撞

    <html> <head> <title>小球之间的碰撞(全然弹性碰撞)</title> <script src="../js/jsce ...

  4. HTML5 中的 canvas 画布（一）

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

  5. HTML5中的Canvas详解

    什么是Canvas HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图 ...

  6. HTML5中的 Canvas

    什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...

  7. HTML5中的Canvas和SVG

    Canvas 和 SVG 都允许我们在浏览器中创建图形,但是它们在根本上是不同的. 1 SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中 ...

  8. HTML5 中的 canvas 画布（二）

    绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image();  // 先创建图片对象 image.src = '图片的 ...

  9. HTML5中的Canvas

    1.Canvas标签的宽高一定要设置在标签上或者采用js添加属性,如果用css去设置的话,会把画布被拉伸,相当于将默认的画布拉伸到指定位置.默认为300px*100px; <canvas wid ...

随机推荐

  1. springboot测试的时候插入数据: error performing isolated work; SQL [n/a]; nested exception is org.hibernate...

    上网查了一下,说的是自增惹得麻烦!!在@GeneratedValue后面加上框框中的内容就OK拉!

  2. 关于websocket的代码，实现发送信息和监听信息（前端 后端（node.js））

    文件结构 node.js代码 // 需要HTTP 模块来启动服务器和Socket.IOvar http= require('http');var fs = require('fs');// 在8080 ...

  3. 解决margin塌陷问题

    父元素添加: border: 1px solid transparent; 或者 over-flow:hidden;

  4. C ++ _基础之共用体

    由以下代码来进一步学习共用体 #include <stdio.h> #include<iostream> void main() { union un { int a; cha ...

  5. MATLAB读取每个文件夹下的badcsv文件后合并为总的badexcel文件

    clear; %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%读取子文件夹中bad.csv数据%并把所有数据写到一个excel文件中%%%%%%%%%%%%%%%%%% ...

  6. 使用阿里云RDS

    1)购买 注意内网免费 外网收费 内网需要跟服务器ECS在同一VPC下 即ECS买在华东1 RDS也必须在华东1 2)使用 配置白名单  全部通过设置为0.0.0.0/0 (不建议) 创建账户 创建数 ...

  7. [LUOGU] [NOIP2017] P3960 列队

    题目描述 Sylvia 是一个热爱学习的女孩子. 前段时间,Sylvia 参加了学校的军训.众所周知,军训的时候需要站方阵. Sylvia 所在的方阵中有 n \times mn×m 名学生,方阵的行 ...

  8. Hibernate-04

    HQL查询语法 查询:public class Dome{ Session session = HibernaeUitls.openSession(); Transaction tx = sessio ...

  9. python 02 8/21-8/23

    计算机由硬件系统和软件系统组成,硬件系统分为由CPU(运算器+控制器)+内存储器(电信号)组成的主机部分,由输入设备+输出设备+外存储器(硬盘(磁信号).U盘)组成的外设部分.软件系统由系统软件和应用 ...

  10. JavaScript 高级技巧 Memoization

    memoization 来源于拉丁语 memorandum ("to be remembered"),不要与 memorization 混淆了. 首先来看一下维基百科的描述: In ...