// 获取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创建复杂的动画效果。