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="1350px" height="600px">
  9. 		</canvas>
  10. 		<script type="text/javascript">
  11. 			var canvas = document.getElementById('mc');
  12. 			var cxt = canvas.getContext('2d');
  13. 			//设置画布背景颜色
  14. 			cxt.fillStyle = "#030303";
  15.    	 	cxt.fillRect(0, 0, canvas.width, canvas.height);
  16. 			//载入大炮图片
  17. 			var img = new Image();
  18. 			img.src = "artillery.png";
  19. 			img.onload = function(){
  20. 				cxt.drawImage(img,0,325);//将图片放在
  21. 			}
  22. 			var cyc = 10;
  23. 			var a = 50;
  24. 			var balls = [];
  25. 			//随机生成的数据
  26. 			function getRandomNumber(min,max){
  27. 				return (min + Math.floor(Math.random() * (max - min + 1)));
  28. 			}
  29. 			//循环实现大炮的轰炸
  30. 			var somethingAsync = eval(Jscex.compile("async", function () {
  31. 				while (true) {
  32. 					//模拟炮弹
  33. 					var ball = {
  34. 						x : 185,
  35. 						y : 470,
  36. 						r : getRandomNumber(0,20),
  37. 						vx : getRandomNumber(190,3000),
  38. 						vy : getRandomNumber(-3000,0)
  39. 					};
  40. 					balls.push(ball);
  41. 					//当炮弹的数量大于100时，就会从浏览器里面移除一个小球，以防止浏览器的堆栈溢出
  42. 					if(balls.length > 200){
  43. 						balls.shift();
  44. 					}
  45. 					cxt.fillStyle = "rgba(0,0,0,.3)";
  46. 					cxt.fillRect(0,0,canvas.width,canvas.height);
  47. 					cxt.fillStyle = randomColor();
  48. 					cxt.drawImage(img,0,425);
  49. 					//绘制炮弹运动的路径
  50. 					for (i in balls) {
  51.               cxt.beginPath();
  52.               cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
  53.               cxt.closePath();
  54.               cxt.fill();
  55.               balls[i].y += balls[i].vy * cyc / 1000;
  56.               balls[i].x += balls[i].vx * cyc / 1000;
  57.               //当全部的球都碰撞到地面时
  58.               if (balls[i].r + balls[i].y >= canvas.height) {
  59.                   if (balls[i].vy > 0) {
  60.                       balls[i].vy *= -0.9;
  61.                   }
  62.               }
  63.               else {
  64.                   balls[i].vy += a;
  65.               }
  66.               //当全部的球都碰到左右两墙壁时
  67.               if(balls[i].x >= canvas.width || balls[i].r >= balls[i].x){
  68.               	balls[i].vx *= -1;
  69.               }
  70.            }
  71. 					 $await(Jscex.Async.sleep(cyc));
  72. 				}
  73. 			}));
  74. 			//随机生成颜色
  75. 			function randomColor(){
  76. 				var arr = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","F"];
  77. 				var str = "#";
  78. 				var index;
  79. 				for (var i = 0; i < 6; i++) {
  80. 					index = Math.round(Math.random()*15);//随机生成一个下表
  81. 					str += arr[index];
  82. 				}
  83. 				return str;
  84. 			}
  85.  
  86. 			somethingAsync().start();
  87.  
  88. 		</script>
  89. 	</body>
  90. </html>

版权声明：本文博主原创文章，博客，未经同意不得转载。

讲座：html5于canvas疯狂的炮轰实现的更多相关文章

  1. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  2. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  3. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  4. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  5. HTML5 之Canvas绘制太阳系

    <!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...

  6. HTML5 中canvas支持触摸屏的签名面板

    1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...

  7. 【HTML5】Canvas画布

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  8. html5 之 canvas 相关知识(一)概念及定义

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  9. HTML5之Canvas画布

    先上代码: <canvas width="1000" height="800">浏览器不支持HTML5!</canvas> <sc ...

随机推荐

  1. WPF界面设计技巧（2）—自定义漂亮的按钮样式

    原文:WPF界面设计技巧(2)-自定义漂亮的按钮样式 上次做了个很酷的不规则窗体,这次我们来弄点好看的按钮出来,此次将采用纯代码来设计按钮样式,不需要 Microsoft Expression Des ...

  2. HDU 1241 ：Oil Deposits

    Oil Deposits Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tot ...

  3. pygame系列_箭刺Elephant游戏

    这个游戏原名为:Chimp,我们可以到: http://www.pygame.org/docs/tut/chimp/ChimpLineByLine.html 获取到源码和详细的源码讲解 下面是我对游戏 ...

  4. WPF之Binding深入探讨--Darren

    1,Data Binding在WPF中的地位 程序的本质是数据+算法.数据会在存储.逻辑和界面三层之间流通,所以站在数据的角度上来看,这三层都很重要.但算法在3层中的分布是不均匀的,对于一个3层结构的 ...

  5. mysql copy复制拷贝表数据及结构的几种方式(转)

    mysql拷贝表操作我们会常常用到,下面就为您详细介绍几种mysql拷贝表的方式,希望对您学习mysql拷贝表方面能够有所帮助.假如我们有以下这样一个表:id username password--- ...

  6. 【Web优化】Yslow优化法则（四）启用Gzip压缩

    Yslow的第4个经验法则指出:启用gzip压缩功能,能够降低HTTP传输的数据和时间,从而降低client请求的响应时间. 本篇是Yslow法则的第四个,主要包含三个方面的内容: 1.      什 ...

  7. WPS2012交叉引用提示word比wps这种强烈的更新参考

                WPS2012交叉引用技巧,word比wps这点强更新參考文献 到时生成仅仅有有一条线,好像WPS不能够,word能够,假设谁知道能够补充.^_^ 1.写论文,參考文献的改动非 ...

  8. 建立Hibernate二级Cache

    建立Hibernate二级Cache它需要两个步骤:首先,一定要使用什么样的数据并发策略,然后配置缓存过期时间,并设置Cache提供器. 有4种内置的Hibernate数据并发冲突策略,代表数据库隔离 ...

  9. C++写一个简单的解析器（分析C语言）

    该方案实现了一个分析C语言的词法分析+解析. 注意: 1.简单语法,部分秕.它可以在本文法的基础上进行扩展,此过程使用自上而下LL(1)语法. 2.自己主动能达到求First 集和 Follow 集. ...

  10. BootStrap布局案例

    BootStrap布局 bootstrap 2.3版与3.0版的使用区别 http://www.weste.net/2013/8-20/93261.html 以一个博客系统的首页,来介绍如何布局 1, ...