<html>

	<head>

		<title>坎农</title>

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

	</head>

	<body>

		<canvas id="mc" width="1350px" height="600px">

		</canvas>

		<script type="text/javascript">

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

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

			//设置画布背景颜色

			cxt.fillStyle = "#030303";

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

			//载入大炮图片

			var img = new Image();

			img.src = "artillery.png";

			img.onload = function(){

				cxt.drawImage(img,0,325);//将图片放在

			}

			var cyc = 10;

			var a = 50;

			var balls = [];

			//随机生成的数据

			function getRandomNumber(min,max){

				return (min + Math.floor(Math.random() * (max - min + 1)));

			}

			//循环实现大炮的轰炸

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

				while (true) {

					//模拟炮弹

					var ball = {

						x : 185,

						y : 470,

						r : getRandomNumber(0,20),

						vx : getRandomNumber(190,3000),

						vy : getRandomNumber(-3000,0)

					};

					balls.push(ball);

					//当炮弹的数量大于100时，就会从浏览器里面移除一个小球，以防止浏览器的堆栈溢出

					if(balls.length > 200){

						balls.shift();

					}

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

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

					cxt.fillStyle = randomColor();

					cxt.drawImage(img,0,425);

					//绘制炮弹运动的路径

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

                  }

              }

              else {

                  balls[i].vy += a;

              }

              //当全部的球都碰到左右两墙壁时

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

              	balls[i].vx *= -1;

              }

           }

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

				}

			}));

			//随机生成颜色

			function randomColor(){

				var arr = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","F"];

				var str = "#";

				var index;

				for (var i = 0; i < 6; i++) {

					index = Math.round(Math.random()*15);//随机生成一个下表

					str += arr[index];

				}

				return str;

			}

			somethingAsync().start();

		</script>

	</body>

</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. SWT的TableVierer的使用三(数据筛选和着色)

    如果我们想根据某一列来过滤记录,如何实现呢?很简单,定义一个过滤器filter.这里只演示定义一个过滤器的情况.现实中你可以定义多个灵活的过滤器,通过替换过滤器来实现各种各样的过滤.一.过滤器代码: ...

  2. Oracle表空间详解

    Oracle表空间详解 1.表空间的分类 Oracle数据库把表空间分为两类:系统表空间和非系统表空间. 1.1系统表空间指的是数据库系统创建时需要的表空间,这些表空间在数据库创建时自动创建,是每个数 ...

  3. 关于java mail 发邮件的问题总结（转）

    今天项目中有需要用到java mail发送邮件的功能,在网上找到相关代码,代码如下: import java.io.IOException; import java.util.Properties; ...

  4. 使用Maven管理Spring

    原文链接: Spring with Maven原文日期: 2013年04月17日翻译日期: 2014年06月29日翻译人员: 铁锚 1. 概述本教程向您展示怎样通过 Maven 管理 Spring 的 ...

  5. Socket编程实践(13) --UNIX域名协议

    UNIX域名协议 UNIX域套接字与TCP相比, 在同一台主机上, UNIX域套接字更有效率, 差点儿是TCP的两倍(因为UNIX域套接字不须要经过网络协议栈,不须要打包/拆包,计算校验和,维护序号和 ...

  6. DLNA它 Error, can&#39;t findlibavformat ! 解

    DLNA库版本号为libdlna-0.2.4 运行./configure出错: ------------------------------ Error, can't findlibavformat ...

  7. vs修错小知识，相当于我自己的笔记，需要的人可以看下

    在出现这种外部错误时,首先得检查你自己的的类的方法是否都以及实现了,我就是出现没有实现某些方法所以报出这个错误!!! 结果是onExit()方法我定义了没有去实现它. (待续)

  8. 将本地文件上传到指定的服务器(HttpWebRequest方法)

    将本地文件上传到指定的服务器(HttpWebRequest方法),通过文件流,带文件名,同文件一同上传的表单文本域及值. ///<summary> /// 将本地文件上传到指定的服务器(H ...

  9. FileStream:The process cannot access the file because it is being used by another process

    先看下面一段代码(先以共享的方式打开文件读写,然后以只读的方式打开相同文件): FileStream fs  = new FileStream(filePath, FileMode.Open, Fil ...

  10. python正文（两）

    在本文中,我读了记录和总结<Python标准库>一本书,本节课文的学习和理解. 事实上,在Python于,使用一些方法这段文字是一回事,尤其是经常使用.在一般情况下,会用String这样的 ...