<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. [Java]Java工程师成神之路

    http://blog.csdn.net/sunnyyoona/article/details/50384595

  2. select onchange事件的使用

    <select name="expireDay" id="expireDay" class="form-control" onchan ...

  3. image的resizeMode属性

    Image组件必须在样式中声明图片的宽和高.如果没有声明,则图片将不会被呈现在界面上.    我们一般将Image定义的宽和高乘以当前运行环境的像素密度称为Image的实际宽高. 当Image的实际宽 ...

  4. docker-machine 快速搭建docker环境

    环境:腾讯云测试成功 1.条件:本地主机A和远程主机B 2.远程主机B,配置免密登录 1,在本地主机A上生成公钥和私钥,生成命令:ssh-keygen -t rsa 私钥:id_rsa 公钥:id_r ...

  5. 201621123079《java程序设计》第六周作业总结

    作业06-接口.内部类 1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 2. 书面作业 1. c ...

  6. 04--activiti demo

    核心API1:ProcessEngine说明:1) 在Activiti中最核心的类,其他的类都是由他而来.2) 产生方式: ProcessEngine processEngine = ProcessE ...

  7. pwnable.kr cmd1之write up

    看一下源代码: #include <stdio.h> #include <string.h> int filter(char* cmd){ ; r += strstr(cmd, ...

  8. Flask--登录检查(简单篇)---xunfeng巡风实例篇

    如果session返回的是loginsuccess,那么通过redirect直接跳转到执行的页面或者view. 同时通过装饰器的形式.. # -*- coding: UTF-8 -*- from fu ...

  9. hrbust-1909理工门外的树,不用线段数，贪心思路~~

    理工门外的树 Time Limit: 1000 MS Memory Limit: 32768 K Total Submit: 605(125 users) Total Accepted: 154(11 ...

  10. [luoguP1666] 前缀单词（DP）

    传送门 先把所有字符串按照字典序排序一下 会发现有字符串x和y(x再y前面,即字典序小),如果x不是y的前缀,那么在x前面不是x前缀的字符串也不是y的前缀 这样就可以DP了 f[i][j]表示前i个字 ...