<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. 刚接触js不久，自己写的banner幻灯片效果。

    对于我这种菜鸟来讲,刚接触项目.叫我用插件,其实我说插件太臃肿不想用,倒不如说我是看不懂那些插件...- -(更愿意自己写点看得懂的代码,顺便也是个学习的过程) 所以自己花了些时间,自己来写了个dem ...

  2. Html5-Canvas实现简易的抽奖转盘

    ###Html5实现抽奖转盘效果 1.实现的基本效果 2.主要的内容 html5中canvas标签的使用 jQueryRotate.js旋转插件 3.主要html代码 <body> < ...

  3. php基础知识【函数】（4）时间date

    一.time() -- 返回当前的 Unix 时间戳 $nextWeek = time() + (7 * 24 * 60 * 60); echo 'Next Week: '. date('Y-m-d' ...

  4. CSS3的appearance属性--改变元素的外观

    CSS3 appearance 属性 CSS 参考手册 实例 使 div 元素看上去像一个按钮: div { appearance:button; -moz-appearance:button; /* ...

  5. 关于C#的委托

    作者  陈嘉栋(慕容小匹夫) 阅读目录 0x00 前言 0x01 从观察者模式说起 0x02 向Unity3D中的SendMessage和BroadcastMessage说拜拜 0x03 认识回调函数 ...

  6. vs2012 aps.net4.0/4.5尚未在web服务器上注册

    安装了vs2015后,vs2012 启动后报错: aps.net4.0/4.5尚未在web服务器上注册 解决办法: 下载微软补丁: http://blogs.msdn.com/b/webdev/arc ...

  7. Cortex-M0系统滴答定时器Systick详解

    上图是LPC1114系统滴答定时器(SysTick)的结构图.系统滴答定时器位于Cortex-M0内核中,也就是说,不论是LPC1114,还是其他的Cortex-M0内核单片机,都有这个系统定时器.其 ...

  8. 带你走进EJB--MDB实现发送邮件(1)

    在实际的项目中我们有这样的需求,用户注册网站成功之后系统会自动的给注册用户发送注册成功通知邮件,而发送通知邮件的具体过程我们可以通过MDB来实现. 在用MDB来实现发送通知过程之前我们需要先了解一下J ...

  9. <未测>源码升级安装glibc和rpm升级glibc

    源码升级安装glibc和rpm升级glibc http://jacklin9.spaces.live.com/blog/cns!A891B52E1182AFB2!346.entry http://bl ...

  10. Linux Kernel 空指针逆向引用拒绝服务漏洞

    漏洞名称: Linux Kernel 空指针逆向引用拒绝服务漏洞 CNNVD编号: CNNVD-201306-449 发布时间: 2013-07-01 更新时间: 2013-07-01 危害等级:   ...