如何用JavaScript在canvas上实现流星雨效果，形成长尾词？

本文共计2289个文字，预计阅读时间需要10分钟。

目录前言需求分析实现过程

1.绘制满天繁星

2.满天繁星闪烁起来

3.绘制流星

4.流星划过夜空

5.流星雨

6.合并视觉盛宴

前言最近总是梦到一些小事，印象最深的就是夏天坐在屋子里。

目录

• 前言
• 需求分析
• 实现过程
• 1.绘制满天繁星
• 2.满天繁星闪起来
• 3.绘制流星
• 4.流星划过夜空
• 5.流星雨
• 6.merge视觉盛宴

前言

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

今天，我决定用canvas为大家带来一场流星雨视觉盛宴。

需求分析

首先我们需要的元素有：夜空、满天繁星、流星雨。

满天繁星：这个其实就是画上一个个点，然后不断的通过颜色交替，营造出一种星星闪烁的意境。