HTML5 Canvas与JavaScript携手绘制动态星空背景

// 获取canvas元素并设置绘图上下文
var canvas = document.getElementById('space');
var ctx = canvas.getContext('2d');
 
// 星星对象的构造函数
function Star(x, y) {
    this.x = x;
    this.y = y;
    this.radius = Math.random() * 0.2;
    this.speed = Math.random() * 0.05;
}
 
// 绘制星星的方法
Star.prototype.draw = function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    ctx.fillStyle = 'white';
    ctx.fill();
};
 
// 更新星星位置的方法
Star.prototype.update = function() {
    this.x -= this.speed;
    if (this.x < 0) {
        this.x = canvas.width;
        this.speed = Math.random() * 0.05;
    }
};
 
// 创建星星数组并初始化
var starArray = [];
var numStars = canvas.width * canvas.height / 500;
for (var i = 0; i < numStars; i++) {
    starArray.push(new Star(Math.random() * canvas.width, Math.random() * canvas.height));
}
 
// 绘制背景
function drawSpace() {
    ctx.globalCompositeOperation = 'source-over';
    ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  
    starArray.forEach(function(star) {
        star.draw();
    });
  
    starArray.forEach(function(star) {
        star.update();
    });
}
 
// 动画循环
setInterval(drawSpace, 100);

这段代码定义了一个星星对象，并创建了一个星星数组。然后，它使用setInterval方法每隔一定时间重绘画布，产生动态的星空背景效果。这是一个很好的教学示例，展示了如何使用JavaScript和HTML5 Canvas创建复杂的动画效果。