我用canvas带你看一场流星雨 _生活百科

前言最近总是梦见一些小时候的故事，印象最深刻的就是夏天坐在屋顶上，看着满天的繁星，一颗，两颗，三颗...不由自主地开始了数星星的过程。不经意间，一颗流星划过夜间，虽然只是转瞬即逝，但它似乎比夜空中的其它繁星更吸引着我。听老人说，看见流星的时候许愿，愿望是可以实现的，此时早已把数星星抛之脑后，开始期待着下一颗流星的出现。但是那天晚上，流星再也没有出现，这也成了自己小时候的一个遗憾。
今天，我决定用canvas为大家带来一场流星雨视觉盛宴。

文章插图
如果这篇文章有帮助到你，?关注+点赞?鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取最新文章～
需求分析首先我们需要的元素有：夜空、满天繁星、流星雨。
满天繁星：这个其实就是画上一个个点，然后不断的通过颜色交替，营造出一种星星闪烁的意境。
流星雨：流星处于他自己的运动轨迹之中，当前的位置最亮，轮廓最清晰，而之前划过的地方离当前位置轨迹距离越远就越暗淡越模糊，其实它就是一个渐变的过程，恰巧canvas有方法可以创建一个沿参数坐标指定的直线的渐变。然后让它从右上向左下移动，这样就能营造一种流星雨的效果，同时实现动画的循环。
OK，需求分析结束，准备动手开干～

文章插图
实现过程1.绘制满天繁星

//创建一个星星对象class Star {constructor() {this.x = windowWidth * Math.random(); //横坐标this.y = 5000 * Math.random(); //纵坐标this.text = "."; //文本this.color = "white"; //颜色}//初始化init() {this.getColor();}//绘制draw() {context.fillStyle = this.color;context.fillText(this.text, this.x, this.y);}}//画星星for (let i = 0; i < starCount; i++) {let star = new Star();star.init();star.draw();arr.push(star);}

来看下此时的效果：

文章插图
夜空中的满天繁星现在是有了，但是缺乏一点意境，我们得想办法让这些繁星都闪烁起来。
2.满天繁星闪起来【我用canvas带你看一场流星雨】

//创建一个星星对象class Star {constructor() {this.x = windowWidth * Math.random(); //横坐标this.y = 5000 * Math.random(); //纵坐标this.text = "."; //文本this.color = "white"; //颜色}	// 获取随机颜色getColor() {let _r = Math.random();if (_r < 0.5) {this.color = "#333";} else {this.color = "white";}}//初始化init() {this.getColor();}//绘制draw() {context.fillStyle = this.color;context.fillText(this.text, this.x, this.y);}}//画星星for (let i = 0; i < starCount; i++) {let star = new Star();star.init();star.draw();arr.push(star);}//繁星闪起来let t1function playStars() {for (let n = 0; n < starCount; n++) {arr[n].getColor();arr[n].draw();}t1 = requestAnimationFrame(playStars);}

繁星闪烁的元素就在于这个getColor方法，通过不断地切换星星的颜色，来达到星星闪烁的效果。
再来看看这时的效果：