<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. 中级Perl第二章习题

    2. 4. 1. 习题1 [15 分钟] 写一个程序从命令行取一个文件清单, 然后用grep 把那些文件大小在1000 字节以内的文件找出来.用map 把这个清单里的每个字串前加四个空格并在 字串后面 ...

  2. phpcms(4) V9 栏目管理

    phpcms V9框架系统后台管理之栏目管理,请参见下文的源码分析(添加栏目和修改栏目): 参照添加栏目的界面图示,便于对源代码的理解: <?php   // 文件路径:phpcms/modul ...

  3. linuxC编程实战 my_server.c例子问题总结

    今天看linux C 编程实战的my_server例子时,敲到这段代码,对其父子进程关闭socket 进行close调用产生疑问 如图中标注的三个close socket,思考子进程通信结束 关闭自己 ...

  4. UNIX 系统上的文本操作简介

    http://www.oschina.net/question/129540_53561 UNIX 的基本哲学之一就是创建只做一件事并将这一件事做好的程序(或进程).这一哲学要求认真考虑接口以及结合这 ...

  5. 基于jQuery选择器的整理集合

    jquery对象访问1.each(callback):以每个匹配的元素作为上下文来执行一个函数,return false;停止循环;return true;跳至下一个循环. 来个实例 : 代码如下: ...

  6. CSS3学习--dispaly:inline和float:left两者区别

    1.display:inline: 任何不是块级元素的可见元素都是内联元素.其表现的特性是“行布局”形式!(行布局:其表现形式始终以行进行显示)   2.float:left:指定元素脱离普通的文档流 ...

  7. Yii2的相关学习记录，前后台分离及migrate使用（七）

    最近一直忙其它的(其实是懒!),将<深入理解Yii2>看了一遍,一些当初没明白的稍微明了了点,然后又看yii2的图片上传等处理.富文本.restful什么的,但由于没进行到这里,只看也不管 ...

  8. 【技术宅3】截取文件和url扩展名的N种方法

    //截取文件扩展名的N种方法   //第1种 //strrchr() 函数查找字符在指定字符串中最后一次出现的位置,如果成功,则返回其后面的字符串 //返回带有点的扩展名 function get_e ...

  9. Fatal error: Class 'ZipArchive' not found的解决办法

    今天在Linux底下编写导出EXCEL文件并显示输出时,抛出“ZipArchive library is not enabled” 的异常.而我在本地的windows下的代码则是运行正常的. 原因是: ...

  10. Day8 面向对象(补充)

    私有字段 class Foo: def __init__(self, name): self.__name = name def f1(self): print(self.__name) class ...