前言最近总是梦到一些儿时的故事。印象最深的是夏天坐在屋顶上，看着满天的星星，一颗，两颗，三颗。..不由自主地开始了数星星的过程。不经意间，一颗流星划过夜空。虽然只是转瞬即逝，但它似乎比夜空中的其他星星更能吸引我。听老人说，看到流星许愿，愿望就能实现。这时候的你，已经把星星的数量抛在脑后，开始期待下一颗流星的出现。但那天晚上，流星再也没有出现过，这也成了我小时候的遗憾。今天决定用canvas给大家带来一场流星雨视觉盛宴。如果这篇文章对你有帮助，??关注+点赞??给作者打气，文章公众号首发，关注前端南九第一时间获取最新文章~需要分析首先，元素我们需要的是：夜空、漫天繁星、流星雨。满天繁星：这其实就是一点一点地画点，然后不断交替颜色，营造出星光熠熠的意境。流星雨：流星在自己的轨迹上，当前位置最亮轮廓最清晰，离当前位置轨迹越远越暗越模糊。其实，这是一个循序渐进的过程。Canvas具有沿着参数坐标指定的线创建渐变的方法。然后让它从右上角移动到左下角，这样就可以营造出流星雨的效果，同时实现动画的循环。OK，需求分析结束，我们准备动手了~实现过程1.画满天的星星//创建一个星星对象classStar{constructor(){this.x=windowWidth*Math.random();//横坐标this.y=5000*Math.random();//纵坐标this.text=".";//文本this.color="white";//color}//初始化init(){this.getColor();}//绘图draw(){context.fillStyle=this.color;context.fillText(this.text,this.x,this.y);}}//绘制星星for(leti=0;i
