1. <html>
  2. 	<head>
  3. 		<title>平抛运动</title>
  4. 		<script src="../js/jscex.jscexRequire.min.js" type="text/javascript"></script>
  5. 	</head>
  6.  
  7. 	<body>
  8. 		<canvas id="mc" width="900px" height="500px">
  9. 		</canvas>
  10. 		<script type="text/javascript">
  11. 			var canvas = document.getElementById('mc');
  12. 			var cxt = canvas.getContext('2d');
  13. 			//定义一个小球
  14. 			var balls = [];
  15. 			balls.length = 0;
  16. 			//先定义两个球
  17. 			var ball_1 = {//平抛运动的球
  18. 				x:70,
  19. 				y:50,
  20. 				r:15,
  21. 				vx:600,//设置其水平方向的速度为600
  22. 				vy:0
  23. 			};
  24. 			var ball_2 = {//自由落体运动的球
  25. 				x:50,
  26. 				y:50,
  27. 				r:15,
  28. 				vx:0,
  29. 				vy:0
  30. 			};
  31. 			balls.push(ball_1);
  32. 			balls.push(ball_2);
  33. 			var cyc = 10;
  34. 			var a = 10; //重力加速度
  35. 			//绘制画布
  36. 			cxt.fillStyle = "#030303";
  37. 			cxt.fillRect(0,0,canvas.width,canvas.height);
  38. 			var somethingAsync = eval(Jscex.compile("async", function () {
  39. 				while (true) {
  40. 					cxt.fillStyle = "rgba(0,0,0,.3)";
  41. 					cxt.fillRect(0,0,canvas.width,canvas.height);
  42. 					cxt.fillStyle = "#fff";
  43. 					for(var i in balls){
  44. 						cxt.beginPath();
  45. 						cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2,true);
  46. 						cxt.closePath();
  47. 						cxt.fill();
  48. 						balls[i].y += balls[i].vy * cyc / 1000;
  49. 						balls[i].x += balls[i].vx * cyc / 1000;
  50. 						//当球触碰地面
  51. 						if (balls[i].r + balls[i].y >= canvas.height) {
  52.                if (balls[i].vy > 0) {
  53.                    balls[i].vy *= -0.9;//在y轴方向的速度降低  相当于能量消失一部分仅仅保留0.7
  54.                }
  55.             }
  56.             else {
  57.                balls[i].vy += a;//加上两个球在  地面方向的加速度
  58.             }
  59. 						//当球触碰左右两墙壁
  60. 						if(balls[i].x >= canvas.width || balls[i].x < balls[i].r){
  61. 							balls[i].vx *= -1;
  62. 						}
  63. 					}
  64. 					$await(Jscex.Async.sleep(cyc));
  65. 				}
  66. 			}));
  67. 			somethingAsync().start();
  68. 		</script>
  69. 	</body>
  70. </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. Mac 下用homebrew安装配置MongoDB

    ---恢复内容开始--- 1.首先安装homebrew,已有就跳过 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent. ...

  2. No-9.vi __终端中的编辑器

    vi —— 终端中的编辑器 01. vi 简介 1.1 学习 vi 的目的 在工作中,要对 服务器 上的文件进行 简单 的修改,可以使用 ssh 远程登录到服务器上,并且使用 vi 进行快速的编辑即可 ...

  3. Linux vim指令学习

    每天查看一遍vim文档 Linux系统下命令:$ vimtutor 1.可视模式([v] 或者 [Ctrl + v])下的[U]把选中的文本变为大写 .[u]把选中的文本变为小写. 2.[数字] + ...

  4. java 图片合成文字或者awt包下的对话框引入自定义字体库

    成就卡图片字体问题:1.下载 xxx.ttf 文件2.mkdir /usr/local/jdk1.6.0_11/jre/lib/fonts/fallback.     在jre/lib/fonts 下 ...

  5. 如何用纯 CSS 创作一个冒着热气的咖啡杯

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/xjXxoz 可交互视频教程 此视 ...

  6. git/github初级使用

    1.常见的github 国内最流行的php开发框架(thinkphp):https://github.com/top-think/thinkphp 全球最流行的php框架(laravel):https ...

  7. tornado框架基础10-websocket

    websocket 01 长轮询 在网页,我们经常扫码登录,结合之前的学习的知识点,来思考下,前端是如何知道用户在手机上扫码登录了呢? 长轮询:客户端不断的向服务器发送请求 缺点: \1. 开销大 \ ...

  8. python全套视频十五期（116G）

    python全套视频,第十五期,从入门到精通,基础班,就业班,面试,软件包 所属网站分类: 资源下载 > python视频教程 作者:精灵 链接:http://www.pythonheidong ...

  9. 【实验吧】Just Click

    拿到答案需要正确地点击按钮 格式:simCTF{ } 解题链接: http://ctf5.shiyanbar.com/re/rev4.exe 由于最近在学数据库是c#编程,发现是c#,于是用.net ...

  10. CEF与代理

    此文已由作者王荣涛授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. CEF(Chromium Embedded Framework)如今已经广泛被应用于客户端软件,网易内部就有 ...