讲座：html5于canvas疯狂的炮轰实现-优快云博客

<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>