<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. php5.6安装

    # yum --enablerepo=remi,remi-php56 install php-fpm php-common php-mysql php-opcache php-pear php-gd ...

  2. html的input输入框提示信息 点击隐藏

    <input type="text"    <!-- 文本框 --> name="textfield" value="请输入...& ...

  3. ubantu下重启apache

    启动apache服务 sudo /etc/init.d/apache2 start重启apache服务sudo /etc/init.d/apache2 restart停止apache服务 sudo / ...

  4. MongoDB 与传统关系型数据库mysql比较

    与关系型数据库相比,MongoDB的优点: 转载自  http://blog.sina.com.cn/s/blog_966e430001019s8v.html①弱一致性(最终一致),更能保证用户的访问 ...

  5. 使用appium做自动化时如何切换activity

    在使用appium过程中遇到了执行一个用例时有多个不同的acitivity的情况,以下为app内部切换acitivity的方法: 如果仅需要切换一次activity,可以通过设置desired_cap ...

  6. 学习 html5 需要学习的 基本 库

    jquery backbone bootstrap  underscore  appframework  require.js

  7. ps中常用的快捷键

    ctrl+c  复制 ctrl+v 粘贴 ctrl+n 新建文件 ctrl+s 保存 空格键   手抓工具 ctrl+t  自由变形 ctrl+加号  放大 ctrl+减号  缩小 ctrl+r  标 ...

  8. 通过GetManifestResourceStream加载文件出现错误提示“null值”对于“stream”无效[转]

    本文解决了我的问题,收藏一下. 原文地址:http://blog.sina.com.cn/s/blog_a67799f601010atz.html 在做Mobile开发时,需要引入图片,用到了这个方法 ...

  9. install ubuntu

    http://wenku.baidu.com/link?url=Cq6nB1ArObV1liMUT13ZB9o16NQ0-FpELt37R6NuPvz7zoKlz14Mu_k-8CwqQodWpRC8 ...

  10. iOS 16进制颜色和UIcolor的转换

    各种颜色之间的转换,会陆续更新, 实现了 16进制颜色(HEX).RGBA.HSBA.UIColor之间的  相互转换 使用示例(加号方法,类名调用) //UIColor 转 RGB.HSB RGBA ...