<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. Cocos2dx开发（1）——Win8.1下 NDK r10 环境搭建

    内容简要:仅讲述NDK在Windows环境下搭建方法,至于NDK何物一概不属于本文内容,老鸟或已有环境的跳过. 笔者已安装的环境: vs2013企业版.谷歌官网adt 22.3.0(推荐)省得自己ec ...

  2. 转载-Linux下svn搭建配置流程

    Linux下svn搭建配置流程     一.    源文件编译安装.源文件共两个,为: 1.   下载subversion源文件 subversion-1.6.1.tar.gz http://d136 ...

  3. Grunt:多个css,js,进行单独压缩

    module.exports = function (grunt) { // 构建任务配置 grunt.initConfig({ //读取package.json的内容,形成个json数据 pkg: ...

  4. 18 4Sum(寻找四个数之和为指定数的集合Medium)

    题目意思:给一个乱序数组,在里面寻找三个数之和为target的所有情况,这些情况不能重复,增序排列 思路:采用3Sum的做法 ps:有见一种用hash的,存任意两个元素的和,然后变成3sum问题,需要 ...

  5. C#编程连接数据库，通过更改配置文件切换数据库功能。

           该实例主要应用情景:假如某公司用mysql当做数据库服务器,由于发现mysql数据库在运行中出现不稳定情况,针对这情况,厂家要求更换连接数据库方式,改用SQL server数据库,来满足 ...

  6. Python面向对象OOP

    一 OOP     与C++和Java一样,Python同样具有OOP设计. 过程式:从前到后,一条一条,机器能接受的顺序性方式:方式大概为"首先你应该做什么,第二应该做什么,高级点的做点假 ...

  7. iscc2016-basic-心灵鸡汤

    用winhex打开发现 ISCCCongratulations! You need remember: DEath IS JUST A PaRT oF lIFE,sOMeTHInG wE'RE aLL ...

  8. Preparing for the Contest

     Codeforces Round #222 (Div. 1)B:http://codeforces.com/contest/377/problem/B 题意:m个任务,每个任务会有一个复杂度,然后给 ...

  9. KeilC51使用详解 (一)

    第一节 系统概述 Keil C51是美国Keil Software公司出品的51系列兼容单片机C语言软件开发系统,与汇编相比,C语言在功能上.结构性.可读性.可维护性上有明显的优势,因而易学易用.用过 ...

  10. AsyncCalls – Asynchronous function calls

    AsyncCalls – Asynchronous function callsWith AsyncCalls you can execute multiple functions at the sa ...