HTML5+JS绘制流星雨的示例代码分享

来源：懂视网责编：小采时间：2020-11-27 15:11:17

HTML5+JS绘制流星雨的示例代码分享

HTML5+JS绘制流星雨的示例代码分享: 流星雨…… 熟悉HTML5的朋友们应该知道HTML5具有强大的绘图和渲染能力，HTML5配合js的使用比起svg等技术有过之而无不及，而且HTML5图形开发过程也比较简单。绘制动态的图形算是动画了，当然可以利用Flash实现，但是需要插件支持。下面就简单介绍下HTM

推荐度：

点击下载本文 文档为doc格式

导读HTML5+JS绘制流星雨的示例代码分享: 流星雨…… 熟悉HTML5的朋友们应该知道HTML5具有强大的绘图和渲染能力，HTML5配合js的使用比起svg等技术有过之而无不及，而且HTML5图形开发过程也比较简单。绘制动态的图形算是动画了，当然可以利用Flash实现，但是需要插件支持。下面就简单介绍下HTM

流星雨……

熟悉HTML5的朋友们应该知道HTML5具有强大的绘图和渲染能力，HTML5配合js的使用比起svg等技术有过之而无不及，而且HTML5图形开发过程也比较简单。绘制动态的图形算是动画了，当然可以利用Flash实现，但是需要插件支持。下面就简单介绍下HTML5编写动画的过程。

首先：先不讲技术的东西，说说技术与艺术。我觉得在IT领域技术好而缺乏艺术创意，是个好员工，难听点叫代码民工；具有一定艺术创造能力才可能实现技术上的突破。因为技术经过实践与积累总是可以达到，但是艺术是来自于个人的世界观和审美观，这是无法替代与学到的，因此我们教授经常告诫我们不要老是啃技术性的书，多看看、听听建筑学、美学和哲学老师们的书和课。 Jobs应该是很好的例子，他的ipad iphone是技术与艺术的结合体，这种创意是很难被其他IT公司复制的。

话说的有些多，但却是觉得比较重要。老师们常说，如今想要在IT领域创业并且生存下去，就需要一种无法被别人复制的观念与创意，而不单单是某种技术。大家可以在谷歌图片、必应图片和百度图片里面搜索"javascript"词语，就能发现小到算法，大到文化的公司差距……也就能看到谷歌为什么能够成为巨头。

话说到这里，大家肯定都看过流星之类的照片或实际景象，但是如何勾画起来呢？有些时候看起来常见的东西，仔细分析起来还确实不易，这需要细心观察。例如，你知道从你办公楼或住处的楼底到办公室或者公寓的阶梯数目吗？流星是小陨石坠入大气燃烧的现象，因此应该头部明亮，尾部有余光的，如果想做的绚丽，中间可以加点颜色。这样流星的模型就出来了。

其次，回到本文主题，说说技术性的东西吧！

对于整体性的事物常常采用面向对象技术，关于js面向对象可以参看我的《HTML5应用——生日快乐动画之星星》，里面简单介绍了一些。任何一个具体的事物都有属性，如人有姓名、年龄等。因此，流星有速度、颜色、长度等基本属性。

例如我定义的属性

 this.x = -1;
 this.y = -1;
 this.length = -1;
 this.width = -1;
 this.speed = -1;
 this.alpha = 1; //透明度
 this.angle = -1; //以上参数分别表示了流星的坐标、速度和长度
 this.color1 = "";
 this.color2 = ""; //流星的色彩

一个事物存在总需要有所行为，这种行为就是面向对象的方法了。例如流星需要移动位置，绘制自己

例如流星获取一个随机颜色，这是中间部分的颜色，头部必须是白色的

/**************获取随机颜色函数*****************/
 this.getRandomColor = function () //
 {
 var a = 255 * Math.random(); a = Math.ceil(a);
 var a1 = 255 * Math.random(); a1 = Math.ceil(a1);
 var a2 = 255 * Math.random(); a2 = Math.ceil(a2);
 this.color1 = "rgba(" + a.toString() + "," + a1.toString() + "," + a2.toString() + ",1)";
 a = 255 * Math.random(); a = Math.ceil(a);
 a1 = 255 * Math.random(); a1 = Math.ceil(a1);
 a2 = 255 * Math.random(); a2 = Math.ceil(a2);
 this.color2 = "rgba(" + a.toString() + "," + a1.toString() + "," + a2.toString() + ",1)";
 //this.color1 = "white";
 this.color2 = "black";
 }

然后移动过程中需要更新自己的坐标

 /***************重新计算流星坐标的函数******************/
 this.countPos = function ()//
 {
 this.x = this.x - this.speed * Math.cos(this.angle * 3.14 / 180);
 this.y = this.y + this.speed * Math.sin(this.angle * 3.14 / 180);
 }
 /*****************获取随机坐标的函数*****************/
 this.getPos = function () //
 {
 var x = Math.random() * 1000 + 200;
 this.x = Math.ceil(x);
 x = Math.random() * 200;
 this.y = Math.ceil(x);
 this.width = 5; //假设流星宽度是15
 x = Math.random() * 80 + 120;
 this.length = Math.ceil(x);
 this.angle = 30; //假设流星倾斜角30
 this.speed = 1; //假设流星的速度
 }

还需要不断的绘制自己

 /****绘制单个流星***************************/
 this.drawSingleMeteor = function () //绘制一个流星的函数
 {
 cxt.save();
 cxt.beginPath();
 cxt.lineWidth = this.width;
 cxt.globalAlpha = this.alpha; //设置透明度
 var line = cxt.createLinearGradient(this.x, this.y, this.x + this.length * Math.cos(this.angle * 3.14 / 180), 
 this.y - this.length * Math.sin(this.angle * 3.14 / 180)); //创建烟花的横向渐变颜色
 line.addColorStop(0, "white");
 line.addColorStop(0.1, this.color1);
 line.addColorStop(0.6, this.color2);
 cxt.strokeStyle = line;
 cxt.moveTo(this.x, this.y);
 cxt.lineTo(this.x + this.length * Math.cos(this.angle * 3.14 / 180), 
 this.y - this.length * Math.sin(this.angle * 3.14 / 180));
 cxt.closePath();
 cxt.stroke();
 cxt.restore();
 }

在诞生的时候初始化

/****************初始化函数********************/
 this.init = function () //初始化
 {
 this.getPos();
 this.alpha = 1;
 this.getRandomColor();
 }

这样一个完整的流星对象做好了

最后，需要做许多的流星，并且成有序的运动

所以需要定义存储星星的数组，

var Meteors = new Array(); //流星的数量
var MeteorCount = 1; //流星的数量

利用js的setInterval()函数设置定时器不断更新就好了。

 MeteorCount = 20;
 for (var i = 0; i < MeteorCount; i++) //;
 {
 Meteors[i] = new meteor(cxt);
 Meteors[i].init();//初始化
 }

/*************演示流星的函数***********************/
function playMeteors() //流星
{
 for (var i = 0; i < MeteorCount; i++) //循环处理
 {
 var w=Meteors[i].speed*Math.cos(Meteors[i].angle*3.14/180);
 var h=Meteors[i].speed*Math.sin(Meteors[i].angle*3.14/180);
 cxt.clearRect(Meteors[i].x+Meteors[i].length*Math.cos(Meteors[i].angle*3.14/180)-6*w,
 Meteors[i].y-Meteors[i].length*Math.sin(Meteors[i].angle*3.14/180)-6*h,10*w,10*h);
 Meteors[i].drawSingleMeteor();
 Meteors[i].countPos();
 Meteors[i].alpha -= 0.002;
 if (Meteors[i].y>320||Meteors[i].alpha<=0.01) //到达下线
 {
 cxt.clearRect(Meteors[i].x - 1, Meteors[i].y - Meteors[i].length * Math.sin(Meteors[i].angle * 3.14 / 180), 
 Meteors[i].length * Math.cos(Meteors[i].angle * 3.14 / 180)+2, 
 Meteors[i].length * Math.sin(Meteors[i].angle * 3.14 / 180)+2);
 Meteors[i] = new meteor(cxt);
 Meteors[i].init();
 }
 }
}
/***************************************************************************/

HTML5+JS绘制流星雨的示例代码分享

推荐度：

点击下载本文 文档为doc格式

标签：分享代码 html5

热门焦点

HTML5+JS绘制流星雨的示例代码分享

HTML5+JS绘制流星雨的示例代码分享

HTML5+JS绘制流星雨的示例代码分享

最新推荐

猜你喜欢

热门推荐