JavaScript利用canvas实现星空效果

  <div class="landscape">
    </div>
    <canvas id="canvas"></canvas>
    <div class="filter"></div>
    <script src="./round_item.js"></script>

* {
    margin: 0;
    padding: 0;
}
html,
body {
    width: 100%;
    height: 100%;
}

body {
    background: linear-gradient(to bottom, #000 0%, #5788fe 100%);

}

.landscape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./star/xkbg.png);
    background-repeat: repeat-x;
    background-size: 1000px 250px;
    background-position: center bottom;
}
.filter{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: #fa7575;
    animation: colorChange 30s  ease-in infinite;
}
/* 渐变动画*/
@keyframes colorChange {
    0%,100%{
        opacity: 0;
    }
    50%{
        opacity: 0.7;
    }

}

//创建星星的函数
function RoundItem(index, x, y, ctx) {
    this.index = index
    this.x = x
    this.y = y
    this.ctx = ctx
    this.r = Math.random() * 2 + 1
    this.color = 'rgba(255,255,255,1)'
}
// 绘制
RoundItem.prototype.draw = function () { 
    this.ctx.fillStyle = this.color //指定颜色
    this.ctx.beginPath() // 开始绘制
    this.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false) // 绘制圆形
    this.ctx.closePath() // 结束绘制
    this.ctx.fill() //填充形状
}
//移动
RoundItem.prototype.move = function () {
    this.y -= 0.5
    this.draw()
}


let canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
round = [],
initRoundPopulation = 200; //星星的个数

const WIDTH = document.documentElement.clientWidth,
HEIGHT = document.documentElement.clientHeight;

canvas.width = WIDTH
canvas.height = HEIGHT

init()
// setInterval(animate, 1700)
animate()
function init() {
for (var i = 0; i < initRoundPopulation; i++) {
    round[i] = new RoundItem(i, Math.random() * WIDTH, Math.random() * HEIGHT, ctx)
    round[i].draw()
}
}
function animate() {
ctx.clearRect(0, 0, WIDTH, HEIGHT) //清除画布
for (let star of round) {
    star.move()
}
requestAnimationFrame(animate) //通过刷新帧数来调用函数
}