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();}

推薦閱讀