我用canvas带你看一场流星雨( 二 )

现在我们来看一看当年的那个流星:

我用canvas带你看一场流星雨

文章插图
4.流星划过夜空流星有了,现在我们得想办法让它动起来 。这里其实就是通过不断地计算位置来达到流星动起来的效果 。
move() {//清空流星像素let x = this.x + this.width - this.offset_x;let y = this.y - this.height;context.clearRect(x - 3, y - 3, this.offset_x + 5, this.offset_y + 5);//重新计算位置 , 往左下移动this.countPos();//透明度增加this.alpha -= 0.002;//重绘this.draw();}
我用canvas带你看一场流星雨

文章插图
现在,我们就可以看到当年的那颗流星了,是不是很激动 。稍安勿躁,为了弥补当年的遗憾,这里决定来一场从未真实见过的流星雨 。
5.流星雨写到这里,实现流星雨其实就很简单了,我们只需要再多生成一些流星,为它们各自分配不同的坐标即可 。
let t2// 创建流星雨对象class MeteorRain {constructor() {this.x = -1;this.y = -1;this.length = -1; //长度this.angle = 30; //倾斜角度this.width = -1; //宽度this.height = -1; //高度this.speed = 1; //速度this.offset_x = -1; //横轴移动偏移量this.offset_y = -1; //纵轴移动偏移量this.alpha = 1; //透明度this.color1 = ""; //流星的色彩this.color2 = ""; //流星的色彩}init() {//初始化this.getPos();this.alpha = 1; //透明度this.getRandomColor();//最小长度,最大长度let x = Math.random() * 80 + 150;this.length = Math.ceil(x);x = Math.random() + 0.5;this.speed = Math.ceil(x); //流星的速度let cos = Math.cos((this.angle * 3.14) / 180);let sin = Math.sin((this.angle * 3.14) / 180);this.width = this.length * cos;this.height = this.length * sin;this.offset_x = this.speed * cos;this.offset_y = this.speed * sin;}/**获取随机颜色函数**/getRandomColor() {let a = Math.ceil(255 - 240 * Math.random());//中段颜色this.color1 = "rgba(" + a + "," + a + "," + a + ",1)";//结束颜色this.color2 = "black";}/**重新计算流星坐标的函数**/countPos() {////往左下移动,x减少,y增加this.x = this.x - this.offset_x;this.y = this.y + this.offset_y;}/**获取随机坐标的函数**/getPos() {////横坐标this.x = Math.random() * window.innerWidth; //窗口高度//纵坐标this.y = Math.random() * window.innerHeight; //窗口宽度}/**绘制流星**/draw() {//绘制一个流星的函数context.save();context.beginPath();context.lineWidth = 1; //宽度context.globalAlpha = this.alpha; //设置透明度//创建横向渐变颜色,起点坐标至终点坐标let line = context.createLinearGradient(this.x,this.y,this.x + this.width,this.y - this.height);//分段设置颜色line.addColorStop(0, "white");line.addColorStop(0.3, this.color1);line.addColorStop(0.6, this.color2);context.strokeStyle = line;//起点context.moveTo(this.x, this.y);//终点context.lineTo(this.x + this.width, this.y - this.height);context.closePath();context.stroke();context.restore();}move() {//清空流星像素let x = this.x + this.width - this.offset_x;let y = this.y - this.height;context.clearRect(x - 3, y - 3, this.offset_x + 5, this.offset_y + 5);//重新计算位置,往左下移动this.countPos();//透明度增加this.alpha -= 0.002;//重绘this.draw();}}//绘制流星function playRains() {for (let n = 0; n < rainCount; n++) {// console.log(rains, "--");let rain = rains[n];rain.move(); //移动if (rain.y > window.innerHeight) {//超出界限后重来context.clearRect(rain.x, rain.y - rain.height, rain.width, rain.height);rains[n] = new MeteorRain();rains[n].init();}}t2 = requestAnimationFrame(playRains);}
我用canvas带你看一场流星雨

文章插图
6.merge视觉盛宴流星极短暂的星星是也,它不像恒星和行星那般耀眼,却用短暂的生命,划破夜空,用瞬间潇洒的弧线留住美丽的光辉 。昙花和流星瞬间之美令我无法忘怀,大自然神奇的造物者给了我们许多的美,不论瞬间的还是永恒的 , 我们都要用真心去欣赏去品味 。
通过合并前面五个步骤,我们就能够一睹这流星刹那间的交错,而后瞬间就穿透为永恒,只是一刻用生命幻化的美 。
我用canvas带你看一场流星雨

文章插图
最后今天的视觉盛宴就到这里了 , 想要查看源码的同学公众号回复流星雨~
原文首发地址点这里,欢迎大家关注公众号 「前端南玖」 , 如果你想进前端交流群一起学习,请点这里
我是南玖,我们下期见?。。?
【我用canvas带你看一场流星雨】

推荐阅读