<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. Modal 下面的 v-model 就是显示不显示 true 或 false

    Modal 下面的 v-model 就是显示不显示 true 或 false

  2. typescript知识教程

    https://ts.xcatliu.com/basics/type-of-function.html

  3. Java数据结构和算法(一)--栈

    栈: 英文名stack,特点是只允许访问最后插入的那个元素,也就是LIFO(后进先出) jdk中的stack源码: public class Stack<E> extends Vector ...

  4. Java集合(六)--ArrayList、LinkedList和Vector对比

    在前两篇博客,学习了ArrayList和LinkedList的源码,地址在这: Java集合(五)--LinkedList源码解读 Java集合(四)--基于JDK1.8的ArrayList源码解读 ...

  5. 二分 || UOJ 148 跳石头

    L距离中有n块石头,位置在d[i], 移走m块,使从起点0跳到终点l时,每次跳跃的最小距离最大,求这个最小距离 *解法:想到二分(想不到),对要求的结果进行二分,于是对最小距离二分== #includ ...

  6. HTTP初步了解

    HTTP协议简介 HTTP(超文本传输协议)是应用层上的一种客户端/服务端模型的通信协议,它由请求和响应构成,且是无状态的.(暂不介绍HTTP2) 协议 协议规定了通信双方必须遵循的数据传输格式,这样 ...

  7. Maven实战读书笔记（二）：Maven坐标与仓库

    2.1 Maven坐标 Maven坐标是Maven用来表示一个组件依赖的标示. Maven通过下面几个元素定义坐标:groupId.artifactId.version.packaging.class ...

  8. 数论基础之组合数&计数问题

    一.组合数:问题引入:现在有 n 个球,取其中的 k 个球,问一共有多少种方式?答案: 公式直观解释:我们考虑有顺序地取出 k 个球:第一次有 n 种选择,第二次有 n-1 种选择,...,第 k 次 ...

  9. Angular 1.x 框架原理

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

  10. Python运维工程师

    1.单引号,双引号,三引号的区别. 2.Python里面如何实现tuple和List的转换. 3.Python的参数传递是值传递还是引用传递,举例说明Python函数参数传递的几种形式,并说明函数传参 ...