技术与艺术的结合
谈到用HTML5画流星雨这件事，想想看，技术和艺术之间到底有什么关系？虽然说技术很重要，但没有好点子的话，咱们也就只能做个不停敲代码的苦僧了。能不能做出新意，其实就在于你的艺术感怎么样。毕竟，技术，都是靠摸索累积出来的；而艺术，那可是你自己的人生观和审美观。但有的时候，你的那份独特视角，就能让你的作品和别人区分开来，无法被模仿。我现在就拿乔布斯的 iPad和 iPhone这两款产品来说，他们就是技术和艺术的优秀结晶，人人都想效仿，可哪那么容易！
IT行业创业，靠的不仅仅是技能，还得有独特想法和创意。只要你能想到别人想不到的点子，就能在市场竞争里赢过人家。所以说，学技术的时候，也得多了解建筑、美术、哲学这些方面的知识，这样可以启发我们的创造性思维，帮助我们在技术上有更大进步。
流星雨的绘制过程
咱们来说说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 = ""; //流星的色彩
如果你正在用面向对象技术做动画，那就会发现，这种方法不仅能让你思路更清晰，还有助于代码易懂好维护。举个栗子，JavaScript中有很多类可以用来表示每颗流星，然后你可以通过实例化这个类来变出几颗真正的流星出来！
从头开始，做一颗流星的话，得搞定初始化啥的，还有就是动起来跟画出来那些事。想要搞出流星雨效果的心情肯定是有的？那么问题来了，咱们的脚本怎么编？其实很简单，用JavaScript里面那个叫setInterval()的玩意儿，每隔一段时间就让所有流星都动上那么一小下，这样就可以让星空变得更加炫酷！算法，逻辑，这些东西记住就好。我们的任务就是把几个星星按照顺序挪到画布上去，看着它们像行云流水般的在夜空中划过，那种感觉简直完美！
/**************获取随机颜色函数*****************/
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";
}
结语与展望
这篇文章给大家讲解了怎样用HTML5画流星雨动画，让我们明白了技术与艺术结合有多美，也探究了面向对象技术是怎么用在动画中的。就像我们看电影看到的，画面精美、生动。而随着前端技术越来越厉害，HTML5会给我们带来更多好看又好玩的动画。
/***************重新计算流星坐标的函数******************/
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; //假设流星的速度
}
最后，咱们来聊聊这个问题：大家怎么看技术和艺术这两者间该怎样找到平衡?想让自己在IT行业里技术牛逼、又有艺术细菌的话，要怎么做呢?随时欢迎留下你的发言哦!
/****绘制单个流星***************************/
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();
}
。
评论0