<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. 【转】C#中的==、Equal、ReferenceEqual

    [转]C#中的==.Equal.ReferenceEqual 转载自: http://www.cnblogs.com/zagelover/articles/2741409.html 1. Refere ...

  2. web前端中的一些注释表达法

    1.HTML注释 <!--注释的内容--> 注释的地方(根据个人习惯可能有所不同): 结束标签的后面,这一切都是为了程序在嵌套的时候更加方便.明了,如: <div class=&qu ...

  3. 使用Spring IoC进行Bean装配

    Spring概述 Spring的设计严格遵从的OCP(开闭原则),保证对修改的关闭,也就是外部无法改变spring内部的运行流程:提供灵活的扩展接口,也就是可以通过extends,implements ...

  4. SSM调用数据库存储过程

    ServiceImpl中: Map<String,Object> map=new HashMap<String,Object>(); map.put("bid&quo ...

  5. solr中的schema.xml(managed-schema)文件解读

    solr 7.2.1版本managed-schema文件示例 <uniqueKey>id</uniqueKey> 唯一键字段,solr对每一个文档都赋予一个唯一标识符字段,避免 ...

  6. redis异常信息：MISCONF Redis is configured to save RDB snapshots, but it is currently not able to persist on disk.。。。。

    redis.exceptions.ResponseError: MISCONF Redis is configured to save RDB snapshots, but it is current ...

  7. mysql 递归查询父节点 和子节点

    查父集合 --drop FUNCTION `getParentList` )) ) BEGIN ) default ''; ) default rootId; WHILE rootId is not ...

  8. CodeForces 606C--Sorting Railway Cars，思路题~~~

    C - Sorting Railway Cars   Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d &am ...

  9. SQL ROW_NUMBER() 通用分页存储过程

    --提取分页数据,返回总记录数 Create procedure [dbo].[sp_Common_GetDataPaging_ReturnDataCount] ( @SqlString varcha ...

  10. 数列分段Section II（二分）

    洛谷传送门 输入时处理出最小的答案和最大的答案,然后二分答案即可. 其余细节看代码 #include <iostream> #include <cstdio> using na ...