<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. IO流基础

    IO流,也称为数据流,用于处理设备之间的数据传输. JAVA对数据的操作就是通过流的方式,而流分为两种:字符流,字节流 字符流: 可以内部制定码表,处理文字很方便,字符流里的基类是Reader,Wri ...

  2. CSS3中动画transform必须要了解的Skew变化原理

    transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同的变化.今天我们来了解skew的变化原理. skew,其实使用的频率不是很高,当然也没有最低.但是往往,一直 ...

  3. JQUERY 键盘事件

    一 一.首先需要知道的是: 1.keydown()keydown 事件会在键盘按下时触发. 2.keypress()keypress 事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键. 3. ...

  4. nginx 要改进的地方基础

  5. EJB

    Enterprise JavaBean,企业级javabean,是J2EE的一部分,定义了一个用于   开发基于组件的企业多重应用程序的标准.其特点包括网络服务支持和核心开发工具(SDK). 是Jav ...

  6. [BZOJ 2326] [HNOI2011] 数学作业 【矩阵乘法】

    题目链接:BZOJ - 2326 题目分析 数据范围达到了 10^18 ,显然需要矩阵乘法了! 可以发现,向数字尾部添加一个数字 x 的过程就是 Num = Num * 10^k + x .其中 k ...

  7. Response对象

    Response对象来自HttpResponse类,它用于向客户端输出信息或设置客户端输出状态,使用Response对象可以直接发送信息给浏览器.重定向浏览器到另一个URL或设置cookie的值等. ...

  8. SaaS是个不错的生意模式和创业的选择（独立SAAS厂商的三大优势）

    1. 软件独特而又强大,界面绝美2. 数据存在本国3. 数据不留底 4. 可随时寻求卖身或者合作,不受制于人 --------------------------------------------- ...

  9. Hibernate中的事务隔离

    在我们的项目中,老发现程序报告sesssion is closed或者因数据已经被其他事务修改而导致当前事务无法提交,由于系统的运行用户最多也就几十个人,所以考虑使用严格的事务隔离来防止这种类型的问题 ...

  10. 【HDOJ】3088 WORM

    状态压缩+BFS. /* 3088 */ #include <iostream> #include <cstdio> #include <cstring> #inc ...