记事本打造浪漫烟花、爱心、流星雨，原来这么简单！

2024-01-17 11:59:03

用记事本点亮你的爱情：打造浪漫烟花、爱心和流星雨

各位，准备好了吗？让我们踏上一段充满爱的旅程，用最意想不到的方式为你的伴侣创造一个浪漫之夜吧！没错，就是用你电脑上那个不起眼的记事本。别小看它，在这个不起眼的文本编辑器中，隐藏着创造浪漫奇迹的力量。

烟花点亮爱情夜空

想象一下，在黑暗的天空中，五彩缤纷的烟花绽放，庆祝你们爱情的瞬间。用记事本，你可以轻松实现这个梦想。只需输入以下代码，然后将其另存为 HTML 文件：

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var particles = [];
for (var i = 0; i < 100; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 10,
vy: (Math.random() - 0.5) * 10,
radius: Math.random() * 5,
color: "hsl(" + Math.random() * 360 + ", 100%, 50%)"
});
}

function draw() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < particles.length; i++) {
var particle = particles[i];
ctx.fillStyle = particle.color;
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
ctx.fill();

particle.x += particle.vx;
particle.y += particle.vy;

if (particle.x < 0 || particle.x > canvas.width) {
particle.vx = -particle.vx;
}
if (particle.y < 0 || particle.y > canvas.height) {
particle.vy = -particle.vy;
}
}

requestAnimationFrame(draw);
}

draw();
</script>
</body>
</html>

双击打开这个 HTML 文件，让绚烂的烟花在屏幕上绽放吧！

爱心传递浓情蜜意

用记事本创造的爱心，将为你和你所爱的人传递浓浓的情意。输入以下代码并将其另存为 HTML 文件：

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var heart = [];
for (var i = 0; i < 100; i++) {
heart.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 10,
vy: (Math.random() - 0.5) * 10,
radius: Math.random() * 5,
color: "hsl(" + Math.random() * 360 + ", 100%, 50%)"
});
}

function draw() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < heart.length; i++) {
var h = heart[i];
ctx.fillStyle = h.color;
ctx.beginPath();
ctx.arc(h.x, h.y, h.radius, 0, Math.PI * 2);
ctx.fill();

h.x += h.vx;
h.y += h.vy;

if (h.x < 0 || h.x > canvas.width) {
h.vx = -h.vx;
}
if (h.y < 0 || h.y > canvas.height) {
h.vy = -h.vy;
}
}

requestAnimationFrame(draw);
}

draw();
</script>
</body>
</html>

打开这个 HTML 文件，让爱心的海洋将你们包围。

流星雨见证永恒誓言

流星划过天际的浪漫，可以用记事本来重现。只需输入以下代码并将其另存为 HTML 文件：

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var stars = [];
for (var i = 0; i < 100; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 10,
vy: (Math.random() - 0.5) * 10,
radius: Math.random() * 5,
color: "hsl(" + Math.random() * 360 + ", 100%, 50%)"
});
}

function draw() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < stars.length; i++) {
var star = stars[i];
ctx.fillStyle = star.color;
ctx.beginPath();
ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
ctx.fill();

star.x += star.vx;
star.y += star.vy;

if (star.x < 0 || star.x > canvas.width) {
star.vx = -star.vx;
}
if (star.y < 0 || star.y > canvas.height) {
star.vy = -star.vy;
}
}

requestAnimationFrame(draw);
}

draw();
</script>
</body>
</html>