<html>

	<head>

		<title>平抛运动</title>

		<script src="../js/jscex.jscexRequire.min.js" type="text/javascript"></script>

	</head>

	<body>

		<canvas id="mc" width="900px" height="500px">

		</canvas>

		<script type="text/javascript">

			var canvas = document.getElementById('mc');

			var cxt = canvas.getContext('2d');

			//定义一个小球

			var balls = [];

			balls.length = 0;

			//先定义两个球

			var ball_1 = {//平抛运动的球

				x:70,

				y:50,

				r:15,

				vx:600,//设置其水平方向的速度为600

				vy:0

			};

			var ball_2 = {//自由落体运动的球

				x:50,

				y:50,

				r:15,

				vx:0,

				vy:0

			};

			balls.push(ball_1);

			balls.push(ball_2);

			var cyc = 10;

			var a = 10; //重力加速度

			//绘制画布

			cxt.fillStyle = "#030303";

			cxt.fillRect(0,0,canvas.width,canvas.height);

			var somethingAsync = eval(Jscex.compile("async", function () {

				while (true) {

					cxt.fillStyle = "rgba(0,0,0,.3)";

					cxt.fillRect(0,0,canvas.width,canvas.height);

					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();

						balls[i].y += balls[i].vy * cyc / 1000;

						balls[i].x += balls[i].vx * cyc / 1000;

						//当球触碰地面

						if (balls[i].r + balls[i].y >= canvas.height) {

               if (balls[i].vy > 0) {

                   balls[i].vy *= -0.9;//在y轴方向的速度降低  相当于能量消失一部分仅仅保留0.7

               }

            }

            else {

               balls[i].vy += a;//加上两个球在  地面方向的加速度

            }

						//当球触碰左右两墙壁

						if(balls[i].x >= canvas.width || balls[i].x < balls[i].r){

							balls[i].vx *= -1;

						}

					}

					$await(Jscex.Async.sleep(cyc));

				}

			}));

			somethingAsync().start();

		</script>

	</body>

</html>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1bWluZ21fbXVzaWM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

第五讲：使用html5中的canvas动态画出物理学上平抛运动的更多相关文章

  1. HTML5中的canvas基本概念及绘图

    * Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的 ...

  2. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  3. 第七讲：HTML5中的canvas两个小球全然弹性碰撞

    <html> <head> <title>小球之间的碰撞(全然弹性碰撞)</title> <script src="../js/jsce ...

  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和SVG

    Canvas 和 SVG 都允许我们在浏览器中创建图形,但是它们在根本上是不同的. 1 SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中 ...

  8. HTML5 中的 canvas 画布（二）

    绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image();  // 先创建图片对象 image.src = '图片的 ...

  9. HTML5中的Canvas

    1.Canvas标签的宽高一定要设置在标签上或者采用js添加属性,如果用css去设置的话,会把画布被拉伸,相当于将默认的画布拉伸到指定位置.默认为300px*100px; <canvas wid ...

随机推荐

  1. shift Alt + up(down) copy current line ! ctrl + j show the control # vscode key

    shift Alt + up(down) copy current line ! ctrl + j show the control # vscode key

  2. docker 深入理解之cgroups

    cgroups 资源限制 cgroups 是什么 cgroups 最初名为process container,有Google工程师Paul Menage和Rohit Seth于 2006 年提出,后由 ...

  3. 枚举 || CodeForces 742B Arpa’s obvious problem and Mehrdad’s terrible solution

    给出N*M矩阵,对于该矩阵有两种操作: 1.交换两列,对于整个矩阵只能操作一次 2.每行交换两个数. 交换后是否可以使每行都递增. *解法:N与M均为20,直接枚举所有可能的交换结果,进行判断 每次枚 ...

  4. mongdb数据库的操作

    一.数据库使用 1.使用mongodb服务,必须先开启服务,开启服务使用 mongod --dbpath D:mongdb    (D:mongdb  自己所创建数据库的路径, 在cmd窗口中输入) ...

  5. Oracle批量更新数据,使用begin end

    /* 使用begin end批量更新 注意end后面必须使用;结束 并且每条update语句都要用;来结束 所以close为;END; 是为了补全语法 */ <foreach collectio ...

  6. Linux网络技术管理

    1. OSI七层模型和TCP/IP四层模型 1.1 osi 七层模型 Open System interconnection,开放系统互连参考模型是国际标准化组织(ISO)制定的一个用于计算机或通信系 ...

  7. Angular 1.x 框架原理

    指令生命周期 compile阶段 对dom进行编译,首先(如果有的话)对template进行应用(这个过程只执行一次).然后把当前指令(内部的指令还没被渲染)传递给iElement,接着执行compi ...

  8. soc desgin 目前需要做的事情

    1.熟练的画时序图 达到一旦有想法可以立即通过时序图表达出来. 2.下面是项目中经常用到的典型设计 2.1串并互相转换 2.2cdc 2.3握手协议 2.4cgc(门控时钟) 2.5AHB2reg文件 ...

  9. C第12章-----堆

    #include <stdio.h> #include <stdlib.h> //声明Person结构 //struct Person{ //    float heightI ...

  10. luogu3960 列队

    参考这篇 #include <iostream> #include <cstdio> #include <vector> using namespace std; ...