canvas绘制流星效果------彭记（014）

最新推荐文章于 2025-06-01 12:13:03 发布

转载

最新推荐文章于 2025-06-01 12:13:03 发布 · 1.4k 阅读

8 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/pgm0908/p/7348136.html

文章标签：

#javascript #移动开发 #ViewUI

本文介绍了如何利用canvas在网页中绘制出逼真的流星效果，通过JavaScript编程技巧，实现流星划过天际的动态视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas绘制流星效果

偶然看到一篇用canvas绘制流星雨，试了试效果还不错

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>一起来看流星雨</title>
  <script>
    var context;
    var arr = new Array();
    var starCount = 800;
    var rains = new Array();
    var rainCount = 20;
    //初始化画布及context
    function init() {
   
   
      //获取canvas
      var stars = document.getElementById("stars");
      windowWidth = window.innerWidth; //当前的窗口的高度
      stars.width = windowWidth;
      stars.height = window.innerHeight;
      //获取context
      context = stars.getContext("2d");
    }
    //创建一个星星对象
    var Star = function () {
   
   
      this.x = windowWidth * Math.random();//横坐标
      this.y = 5000 * Math.random();//纵坐标
      this.text = ".";//文本
      this.color = "white";//颜色
      //产生随机颜色
      this.getColor = function () {
        var _r = Math.random();
        if (_r < 0.5) {
          this.color = "#333";
        } else {
   
   
          this.color = "white";
        }
      }
      //初始化
      this.init = function () {
   
   
        this.getColor();
      }