<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. slice的用法与用量

    用法:slice用于从指定值截取并返回新数组,但原数组结构不变 arrayObject.slice(start,[end]) 起始值可以为负数,-1为最后一个,end选填,但取不到end坐标的值,实际 ...

  2. Linux系统分区

    在Linux系统里面,"分区",被称作"挂载点" 挂载点 意思就是把一部分硬盘容量,分成一个文件夹的形式,用来做某些事情,这个文件夹的名字,就叫做:挂载点 (如 ...

  3. GlusterFS简单配置

    1.准备工作 准备三台机器(物理机或者虚拟机均可)用于安装和测试GlusterFS,其中两台用作服务器,一台用作客户端,主机名分别为: Server1.zhaogang.int  10.0.21.24 ...

  4. openerp service install

    cp  openerp.init  to   /etc/init.d/openerp update-rc.d   openerp default PATH=/sbin:/usr/sbin:/bin:/ ...

  5. Scut DirCenter 网站编辑、搭建与调试

    直接利用 Scut 提供的服务器管理工具进行服务器管理. 教程:https://github.com/ScutGame/Scut/wiki/DirServer. 几个注意点: 下载的数据库导入bat是 ...

  6. adb设备,根据serial获取vid pid

    使用adb devices命令,可以轻松获取到所有连接到PC的adb设备的serial值. 但是adb命令无法获取adb usb设备的vendor id和product id. 本程序根据adb协议, ...

  7. swfobject.js IE兼容问题

    错误代码 在562行左右 / add style rule if (ua.ie && ua.win) { if (dynamicStylesheet && typeof ...

  8. hdu 5063 Operation the Sequence

    http://acm.hdu.edu.cn/showproblem.php?pid=5063 思路:因为3查询最多50,所以可以在查询的时候逆操作找到原来的位置,然后再求查询的值. #include ...

  9. 如何开发Android Wear应用程序

    Android Wear是连接安卓手机和可穿戴产品的一个平台.自从今年上半年发布以来,Android Wear获得了大量关注,既有来自消费者的关注,也有来自开发商的关注,后者希望自己的应用程序已经准备 ...

  10. latch介绍

    latch是一种锁,用来实现对Oracle所有共享数据结构的串行化访问.共享池就是这样一个例子, 这是系统全局区中一个庞大的共享数据结构,Oracle正是在这里存储已解析,已编译的SQL. 修改这个共 ...