效果展示：
（是动图）
学习内容：
在这篇文章中，我们将介绍如何创建一个浪漫的粉红色流星雨场景。这个场景使用HTML5的元素和JavaScript来绘制一个动态的流星雨效果，并添加一些浪漫的文字。我们将详细解释代码的每一部分，帮助你理解并自定义这个浪漫的效果。
代码解析：
HTML部分
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浪漫粉红色流星雨</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
font-family: 'Arial', sans-serif;
background: linear-gradient(to bottom, #ff9a9e, #fecfef);
}
canvas {
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}
.romantic-text {
position: fixed;
bottom: 50px;
width: 100%;
text-align: center;
font-size: 32px;
color: white;
text-shadow: 2px 2px 4px #000000;
z-index: 1;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="romantic-text">你是我最美的遇见</div>
</body>
</html>
解析：
- 在部分，我们定义了基本的页面设置和CSS样式，包括字体、背景颜色和画布的样式。
- 部分包含了一个元素，用于绘制流星雨效果，以及一个
元素，用于显示浪漫的文字。
JavaScript部分
<script type="text/javascript">
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight,
hue = 330,
stars = [],
count = 0,
maxStars = 1500;
var canvas2 = document.createElement('canvas'),
ctx2 = canvas2.getContext('2d');
canvas2.width = 100;
canvas2.height = 100;
var half = canvas2.width / 2,
gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#FFC0CB');
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');
ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();
function random(min, max) {
if (arguments.length < 2) {
max = min;
min = 0;
}
if (min > max) {
var hold = max;
max = min;
min = hold;
}
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function maxOrbit(x, y) {
var max = Math.max(x, y),
diameter = Math.round(Math.sqrt(max * max + max * max));
return diameter / 2;
}
var Star = function () {
this.orbitRadius = random(maxOrbit(w, h));
this.radius = random(60, this.orbitRadius) / 8;
this.orbitX = w / 2;
this.orbitY = h / 2;
this.timePassed = random(0, maxStars);
this.speed = random(this.orbitRadius) / 50000;
this.alpha = random(2, 10) / 10;
count++;
stars[count] = this;
}
Star.prototype.draw = function () {
var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
twinkle = random(10);
if (twinkle === 1 && this.alpha > 0) {
this.alpha -= 0.05;
} else if (twinkle === 2 && this.alpha < 1) {
this.alpha += 0.05;
}
ctx.globalAlpha = this.alpha;
ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
this.timePassed += this.speed;
}
for (var i = 0; i < maxStars; i++) {
new Star();
}
function animation() {
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.5;
ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 0.2)';
ctx.fillRect(0, 0, w, h)
ctx.globalCompositeOperation = 'lighter';
for (var i = 1, l = stars.length; i < l; i++) {
stars[i].draw();
canvas2.style.cssText = "display:none";
};
window.requestAnimationFrame(animation);
}
animation();
window.addEventListener('resize', function() {
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
});
</script>
解析：
- 获取元素和2D绘图上下文。
- 设置canvas的宽度和高度为窗口的宽度和高度。
- 使用一个辅助canvas来绘制星星的图案，并使用渐变效果创建一个粉红色的星星。
- random函数用于生成指定范围内的随机数。
- maxOrbit函数计算星星的最大轨道半径。
- Star对象构造函数用于创建星星对象，包括它们的轨道半径、大小、位置、速度和透明度。
- Star.prototype.draw方法用于绘制星星，并根据它们的速度和时间更新位置。
- 使用一个循环创建多个星星对象并存入数组。
- animation函数负责更新画面，使用requestAnimationFrame进行循环调用。
- 监听窗口大小变化事件，动态调整canvas的宽度和高度。
总结
通过这段代码，我们创建了一个浪漫的粉红色流星雨场景，并添加了浪漫的文字效果。你可以根据自己的需要进一步自定义这个场景，比如更改文字内容、字体样式、星星的颜色和数量等。希望这篇文章对你有所帮助，享受编程的乐趣！
完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浪漫粉红色流星雨</title>
<style>
/* 全局样式 */
body {
margin: 0;
padding: 0;
overflow: hidden;
font-family: 'Arial', sans-serif;
background: linear-gradient(to bottom, #ff9a9e, #fecfef); /* 粉红色渐变背景 */
}
canvas {
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}
/* 浪漫文字样式 */
.romantic-text {
position: fixed;
bottom: 50px;
width: 100%;
text-align: center;
font-size: 32px;
color: white;
text-shadow: 2px 2px 4px #000000;
z-index: 1;
}
</style>
</head>
<body>
<!-- HTML结构 -->
<canvas id="canvas"></canvas>
<!-- 浪漫文字 -->
<div class="romantic-text">你是我最美的遇见</div>
<script type="text/javascript">
// 获取canvas元素和上下文
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight,
hue = 330, // 粉红色的色相
stars = [],
count = 0,
maxStars = 1500; // 星星数量增加
// 创建用于绘制星星的缓存canvas
var canvas2 = document.createElement('canvas'),
ctx2 = canvas2.getContext('2d');
canvas2.width = 100;
canvas2.height = 100;
var half = canvas2.width / 2,
gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#FFC0CB'); // 粉红色
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');
ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();
// 随机函数，用于生成指定范围内的随机数
function random(min, max) {
if (arguments.length < 2) {
max = min;
min = 0;
}
if (min > max) {
var hold = max;
max = min;
min = hold;
}
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 计算最大轨道半径
function maxOrbit(x, y) {
var max = Math.max(x, y),
diameter = Math.round(Math.sqrt(max * max + max * max));
return diameter / 2; // 星星移动范围，值越大范围越小
}
// 星星对象构造函数
var Star = function () {
this.orbitRadius = random(maxOrbit(w, h));
this.radius = random(60, this.orbitRadius) / 8; // 星星大小
this.orbitX = w / 2;
this.orbitY = h / 2;
this.timePassed = random(0, maxStars);
this.speed = random(this.orbitRadius) / 50000; // 星星移动速度
this.alpha = random(2, 10) / 10;
count++;
stars[count] = this;
}
// 绘制星星的方法
Star.prototype.draw = function () {
var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
twinkle = random(10);
if (twinkle === 1 && this.alpha > 0) {
this.alpha -= 0.05;
} else if (twinkle === 2 && this.alpha < 1) {
this.alpha += 0.05;
}
ctx.globalAlpha = this.alpha;
ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
this.timePassed += this.speed;
}
// 创建星星对象并存入数组
for (var i = 0; i < maxStars; i++) {
new Star();
}
// 动画函数，负责更新画面
function animation() {
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.5; // 尾巴效果
ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 0.2)'; // 尾巴颜色
ctx.fillRect(0, 0, w, h)
ctx.globalCompositeOperation = 'lighter';
for (var i = 1, l = stars.length; i < l; i++) {
stars[i].draw();
canvas2.style.cssText = "display:none";
};
window.requestAnimationFrame(animation);
}
animation(); // 开始动画
// 处理窗口调整大小
window.addEventListener('resize', function() {
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
});
</script>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
