我让ai写了一段夜空的代码，很轻易且完美的实现了，没有用默认的python，是因为h5不挑环境，有浏览器就能运行，只是简单演示的话，会显得更加友好。
但是这里要说的并不是这个夜空，虽然ai干不了太精细太复杂的重活，但如果只是如此的话，也显得太过于浅薄了，完全不能体现出它的笨事（划掉，是本事）。
所以我要求它写一段星空，不仅要求星星会闪烁，甚至偶尔还要有流星划过夜空，想想都很浪漫咧，本来没报什么希望，没想到！它真的！做到了！
其间只出现了两个小bug，一是没有设置背景色，导致页面上啥也没看不到，这个只要背景设成黑色就行了。二是流星头尾颠倒，看起来就像是宇宙范围内的大规模时空倒流（当然这不是我们想要的笑果……）
总的来说，良品率相当高！
下面直接上代码！使用方法：直接复制粘贴到文本编辑器中，然后另存为后缀为.html的文件，比如（星空.html），点击即可运行！
ps.注意，windows电脑可能会默认不显示扩展名，这时候你需要让扩展名显示出来，然后再设扩展名。否则你的真实文件名很有可能是这样的：星空.html.txt。
#ai聊天##chat GPT##chatgpt到底有多牛#
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>当连绵的流星划过天际，那是山宗对你的无尽思念</title>
<style>
/* 隐藏滚动条 */
body {
margin: 0px;
overflow: hidden;
background-color:black;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
// 定义变量
let canvas, context, screenW, screenH, stars = [], meteors = [];
// 定义常量
const FPS = 50, numStars = 2000;
window.onload = function () {
// 获取canvas
canvas = document.getElementById('myCanvas');
// 设置画布大小
screenW = canvas.width = window.innerWidth;
screenH = canvas.height = window.innerHeight;
// 获取canvas执行上下文
context = canvas.getContext('2d');
// 组件应用层
// 创建星星
for (let i = 0; i < numStars; i++) {
stars.push({
x: Math.random() * screenW,
y: Math.random() * screenH,
radius: Math.random(),
alpha: Math.random(),
twinkleSpeed: Math.random() * 0.03 + 0.02
});
}
// 创建流星
setInterval(() => {
let speed = Math.random() * 5 + 5;
meteors.push({
x: -100, // 起始x坐标
y: Math.random() * screenH, // 起始y坐标随机
length: Math.random() * 80 + 60, // 流星长度随机(60-140)
angle: Math.PI / 30 * Math.random() - Math.PI / 6, // 角度随机
speed: speed // 速度随机(5-10)
});
}, Math.random() * 500 + 600);
// 启动计时器
setInterval(update, 1000 / FPS);
}
// 更新
function update() {
// 清除画布
context.clearRect(0, 0, screenW, screenH);
// 画星星
for (let i = 0; i < stars.length; i++) {
drawStar(stars[i]);
twinkle(stars[i]);
}
// 画流星
for (let i = 0; i < meteors.length; i++) {
moveMeteor(meteors[i]);
drawMeteor(meteors[i]);
}
}
// 画星星
function drawStar(star) {
context.beginPath();
context.arc(star.x, star.y, star.radius, 0, 2 * Math.PI);
context.fillStyle = `rgba(255, 255, 255, ${star.alpha})`;
context.fill();
}
// 星星闪烁
function twinkle(star) {
star.alpha += star.twinkleSpeed;
if (star.alpha <= 0 || star.alpha >= 1) {
star.twinkleSpeed *= -1;
}
}
// 移动流星
function moveMeteor(meteor) {
meteor.x += Math.cos(meteor.angle) * meteor.speed;
meteor.y += Math.sin(meteor.angle) * meteor.speed;
}
// 画流星
function drawMeteor(meteor) {
// 渐变色
let gradient = context.createLinearGradient(meteor.x, meteor.y, meteor.x + Math.cos(meteor.angle) * meteor.length, meteor.y + Math.sin(meteor.angle) * meteor.length);
gradient.addColorStop(1, 'rgba(255, 255, 255, 1)');
gradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
context.beginPath();
// 线性渐变填充
context.strokeStyle = gradient;
context.lineCap = 'round';
context.lineWidth = 2;
context.moveTo(meteor.x, meteor.y); // 开始坐标
context.lineTo(meteor.x + Math.cos(meteor.angle) * meteor.length, meteor.y + Math.sin(meteor.angle) * meteor.length); // 结束坐标
context.stroke();
}
</script>
</body>
</html>
为了保持小小的神秘感，就不放截图了，大家自己运行康康哟！