vue 星空背景图 组件

摘下星星送给你

个人的博客网站背景有点单调
不想要枯燥的白色背景
然后么自己写了个星空图
先封装成vue组件
后期去折腾下，换博客的背景
可以设置星星个数（默认25）、星星颜色、线条颜色
废话不多说，直接上源码
如果问题，欢迎私信交流

<template>
  <div class="starry-sky">
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
  export default {
    props: {
      point: {
        type: Number,
        default: 25 // 生成的星星（点）的个数, 默认25个
      },
      lineColor: {
        type: String,
        default: 'rgba(45,140,210,0.2)' // 线的颜色
      },
      roundColor: {
        type: String,
        default: 'rgba(45,140,210,0.1)' // 星星的颜色
      },
    },
    data() {
      return {
        docWidth: 0, // 画布宽
        docHeight: 0, // 画布高
        context: null, // canvasDom的执行上下文
        circleArr: [], // 圆点数组
        timer: null, // 定时器对象
      }
    },
    mounted() {