浙江龙网

  1. 首页 > 生活百科 > >

我用canvas带你看一场流星雨

生活百科

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

我用canvas带你看一场流星雨

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

文章插图
实现过程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);}来看下此时的效果：
我用canvas带你看一场流星雨

文章插图
夜空中的满天繁星现在是有了，但是缺乏一点意境，我们得想办法让这些繁星都闪烁起来 。
2.满天繁星闪起来//创建一个星星对象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方法，通过不断地切换星星的颜色，来达到星星闪烁的效果 。
再来看看这时的效果：
我用canvas带你看一场流星雨

文章插图
此刻的自己就可以开始数星星了 ， 一颗，两颗 ， 三颗...
3.绘制流星
简单点理解，流星其实就是一条渐变的线段，当前的位置最亮，轮廓最清晰 ， 而之前划过的地方离当前位置轨迹距离越远就越暗淡越模糊 。
这里的关键API是createLinearGradient，用于创建一个沿参数坐标指定的直线的渐变 。
我用canvas带你看一场流星雨

文章插图
语法：
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
  • x0：起点的 x 轴坐标 。
  • y0：起点的 y 轴坐标 。
  • x1：终点的 x 轴坐标 。
  • y1：终点的 y 轴坐标 。
使用createLinearGradient() 方法初始化一个线性渐变 。在这个线性渐变中添加三种颜色，达到一种渐变的效果来模拟出流星划过夜空的状态 。
/**绘制流星**/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();}

推荐阅读


上一篇：4 Java注解：一个真实的Elasticsearch案例

下一篇：网关、子网地址 Docker | 自定义网络