<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. OpenCV 编程简单介绍(矩阵/图像/视频的基本读写操作)

    PS. 因为csdn博客文章长度有限制,本文有部分内容被截掉了.在OpenCV中文站点的wiki上有可读性更好.而且是完整的版本号,欢迎浏览. OpenCV Wiki :<OpenCV 编程简单 ...

  2. matlab 2014a 改为英文版本号

    1. 在 Matlab 的安装目录以下找到例如以下的路径,X:\MATLAB\R2014a\java\jar,当中 X 为安装盘符,这个不用过多解释了,然后找到目录 zh_CN.此目录就是中文界面的语 ...

  3. 使用VBA将批量的WORD文档转换为PDF

    Sub BatchConvertToPDF() Dim destFolderPath As String destFolderPath = GetFolderPath If destFolderPat ...

  4. Effective C++规定45 附加代码

    这部分是额外的代码的博客.键45条款想法已经实现. #include<iostream> using namespace std; template<typename T> c ...

  5. ubuntu 系统设置bugzilla制

    随着时间的推移.在大脑中形成的记忆总会慢慢的淡去.人的记忆力就是这样.所以最好的办法就是形成博客去记录下来,一方面给自己以后回想用.一方面也算是自己的一个积累.所以一旦选择了一个行业,最好不要轻 易转 ...

  6. 二分图行列匹配---> hdu2119,hdu1498

    hdu2119 题意:给定一个矩形方格,每个格子里面的数字是0或者1,每次操作可以把一整行或列的1变成0,问最少多少次操作能将1全部变为0 一次可以消除某一行或者某一列的1但是可以这么想,最多有多少个 ...

  7. 面向对象的方式进行数据交换网络之间的差异--无缝切换的发展到单机游戏C/S模式

    上一页本文描述描述有关数据的发展过程之间的差异支撑点,这里展示的另一个特点:无缝切换的发展,以独立C/S模式 一般C/S模式都面临一个问题: 就是开发过程中的调试难题,由于涉及到client和服务端相 ...

  8. spring 重定向以及转发 乱码问题解决

    1.spring 转发 request.setAttribute("id", id); request.setAttribute("name",name); r ...

  9. SPOJ PT07X Vertex Cover

    题目意思: 一棵树,找到最少的点能覆盖到所有的边,(也就是每条边俩端 至少有一个在你找到的集合): 解法:每条边只能被俩个点中的一个,或全部覆盖所以我们有树形DP来解: DP[num][flag]// ...

  10. unity3d插入Daikon Forge GUI 中国课程-7-高级控制slider采用

    (游戏开始的牛市)大家好我是孙广东.官方网站提供的是专业的视频教程http://www.daikonforge.com/dfgui/tutorials/,只是是在youtube上,要观看是须要FQ的. ...