<html>

	<head>

		<title>小球之间的碰撞(全然弹性碰撞)</title>

		<script src="../js/jscex.jscexRequire.min.js" type="text/javascript"></script>

	</head>

	<body>

		<canvas id="mc" width="1200px" height="600px">

		</canvas>

		<script type="text/javascript">

			var canvas = document.getElementById('mc');

			var cxt = canvas.getContext('2d');

			//设置画布背景颜色

			cxt.fillStyle = "#030303";

   	 	cxt.fillRect(0, 0, canvas.width, canvas.height);

			var cyc = 20;

			var balls = [];

			//定义一个向x轴正前方运动

			var ball_1 = {

				x:100,

				y:550,

				r:50,

				vx:500,

				vy:0

			};

			//定义一个向x轴反方向运动

			var ball_2 = {

				x:1000,

				y:550,

				r:50,

				vx:-400,

				vy:0

			};

			balls.push(ball_1);

			balls.push(ball_2);

			cxt.fillStyle = "#030303";

			cxt.fillRect(0,0,canvas.width,canvas.height);

			//画出两个小球

			function init () {

				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();

				}

			}

			init();

			var ct

			//动态绘出小球相碰撞的情形

			var somethingAsync = eval(Jscex.compile("async", function (ct) {

				while (true) {

					cxt.fillStyle = "rgba(0,0,0,1)";

					cxt.fillRect(0,0,canvas.width,canvas.height);

					cxt.fillStyle = "#fff";

					//小球运动

					for(var i in balls){

						balls[i].x += balls[i].vx *cyc /1000;

						cxt.beginPath();

						cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2,true);

						cxt.closePath();

						cxt.fill();

						//小球触碰左右两个墙壁

						if(balls[i].x + balls[i].r >= canvas.width || balls[i].x <= balls[i].r){

							balls[i].vx *= -1;

						}

					}

					//推断两个小球是否相互碰撞

					if(Math.abs(ball_1.x - ball_2.x) <= 2*50){

						var temp = ball_1.vx;

								ball_1.vx = ball_2.vx;

								ball_2.vx = temp;

					}

					$await(Jscex.Async.sleep(cyc,ct));

				}

			}));

			//手动控制小球的运动

			function Button1_onclick() {

        ct.cancel();

      }

      function Button2_onclick() {

        ct = new Jscex.Async.CancellationToken();

        somethingAsync(ct).start();

      }

		</script>

		<br>

		<br />

     <br />

     <input id="Button2" class="css3btn" type="button" value="run" onclick="return Button2_onclick()" />

     <input id="Button1" class="css3btn" type="button" value="stop" onclick="return Button1_onclick()" />

	</body>

</html>

第七讲：HTML5中的canvas两个小球全然弹性碰撞的更多相关文章

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

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

  2. python学习第七讲,python中的数据类型,列表,元祖,字典,之元祖使用与介绍

    目录 python学习第七讲,python中的数据类型,列表,元祖,字典,之元祖使用与介绍 一丶元祖 1.元祖简介 2.元祖变量的定义 3.元祖变量的常用操作. 4.元祖的遍历 5.元祖的应用场景 p ...

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

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

  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

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

  8. HTML5中的Canvas和SVG

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

  9. HTML5 中的 canvas 画布（二）

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

随机推荐

  1. Ubuntu Apache 伪静态配置 url重写 步骤

    1.加载rewrite模块sudo ln -s /etc/apache2/mods-available/rewrite.load /etc/apache2/mods-enabled/rewrite.l ...

  2. WIN7下运行hadoop程序报：Failed to locate the winutils binary in the hadoop binary path

    之前在mac上调试hadoop程序(mac之前配置过hadoop环境)一直都是正常的.因为工作需要,需要在windows上先调试该程序,然后再转到linux下.程序运行的过程中,报Failed to ...

  3. hold

    嘿嘿,很久没写博客了.一懒一拖一浮躁就不行了. 果然烦心事太多,一直懒得编程.结果还是编程才能平复我啊! 明天那什么,别担心,平常心嘛! 还好,看了几部电影,不算没收获.自己有意思就看看电影,别瞎想啥 ...

  4. 一站式远程页面调试工具spy-debugger 2.0，已支持HTTPS

    项目名称: spy-debugger 项目地址:https://github.com/wuchangming/spy-debugger 关于spy-debugger npm Build Status ...

  5. ecshop数据表

    ecs_account_log:账户变动日志(注册用户充值.支付等记录信息) ecs_ad:广告表 ecs_admin_action:管理员权限表(定义了128项功能操作) ecs_admin_log ...

  6. vertical-align:top属性

    vertical-align这个是设置元素的垂直排列的. 用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐. 它的值比较多:baseline | sub | super | top | tex ...

  7. YII框架的部署 通过YII脚手架程序创建应用程序系统

    1,把YII框架里面的framework复制粘贴到nginx目录下 2,创建一个商城系统: 1)修改环境变量 制定php.exe的目录 2)C:\Users\Administrator>cd C ...

  8. SQL Server 连接字符串和身份验证

    SQL Server .NET Data Provider 连接字符串包含一个由一些属性名/值对组成的集合.每一个属性/值对都由分号隔开.         PropertyName1=Value1;P ...

  9. javascript深入理解js闭包[转]

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  10. const关键字与指针

    const与指针在一起的几种情况. const int *p1; //表示p1本身不是const,指向的变量是const. const *int p2; //语法错误 int const *p3; / ...