在桌面新建txt文件，复制以下代码，然后重命名文件为你的文件.html，用浏览器打开该文件
<!DOCTYPE html>
<html>
<head>
<title>动态爱心与流行效果</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置画布大小为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 爱心参数
const heartSize = Math.min(canvas.width, canvas.height) * 0.3;
let heartBeat = 1;
let heartBeatDirection = 0.01;
// 流行粒子数组
const particles = [];
const particleCount = 150;
// 初始化粒子
for (let i = 0; i < particleCount; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: Math.random() * 4 + 1,
speedX: Math.random() * 2 - 1,
speedY: Math.random() * 2 - 1,
color: `hsl(${Math.random() * 60 + 330}, 100%, 50%)`,
orbitRadius: Math.random() * heartSize * 1.5 + heartSize * 0.5,
angle: Math.random() * Math.PI * 2,
orbitSpeed: Math.random() * 0.02 + 0.01
});
}
// 绘制爱心函数
function drawHeart(x, y, size, beat) {
ctx.save();
ctx.beginPath();
const topCurveHeight = size * 0.3 * beat;
// 从底部中心开始
ctx.moveTo(x, y + size * 0.35 * beat);
// 绘制左半边
ctx.bezierCurveTo(
x, y - topCurveHeight,
x - size * 0.5, y - topCurveHeight,
x - size * 0.5, y + size * 0.1 * beat
);
ctx.bezierCurveTo(
x - size * 0.5, y + size * 0.3 * beat,
x, y + size * 0.6 * beat,
x, y + size * 0.7 * beat
);
// 绘制右半边
ctx.bezierCurveTo(
x, y + size * 0.6 * beat,
x + size * 0.5, y + size * 0.3 * beat,
x + size * 0.5, y + size * 0.1 * beat
);
ctx.bezierCurveTo(
x + size * 0.5, y - topCurveHeight,
x, y - topCurveHeight,
x, y + size * 0.35 * beat
);
// 创建渐变填充
const gradient = ctx.createRadialGradient(
x, y - size * 0.1, size * 0.1,
x, y, size * 0.8
);
gradient.addColorStop(0, '#ff3366');
gradient.addColorStop(0.7, '#ff0033');
gradient.addColorStop(1, '#cc0033');
ctx.fillStyle = gradient;
ctx.fill();
// 添加发光效果
ctx.shadowColor = '#ff0066';
ctx.shadowBlur = size * 0.5;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.closePath();
ctx.restore();
}
// 动画循环
function animate() {
// 清除画布
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 更新心跳效果
heartBeat += heartBeatDirection;
if (heartBeat > 1.1 || heartBeat < 0.9) {
heartBeatDirection *= -1;
}
// 绘制爱心
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
drawHeart(centerX, centerY, heartSize, heartBeat);
// 更新和绘制粒子
particles.forEach(particle => {
// 粒子围绕爱心轨道运动
particle.angle += particle.orbitSpeed;
const targetX = centerX + Math.cos(particle.angle) * particle.orbitRadius;
const targetY = centerY + Math.sin(particle.angle) * particle.orbitRadius;
// 向目标位置移动
particle.x += (targetX - particle.x) * 0.05;
particle.y += (targetY - particle.y) * 0.05;
// 随机移动
particle.x += particle.speedX;
particle.y += particle.speedY;
// 边界检查
if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1;
if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1;
// 绘制粒子
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
ctx.fillStyle = particle.color;
// 添加发光效果
ctx.shadowColor = particle.color;
ctx.shadowBlur = 10;
ctx.fill();
// 重置阴影
ctx.shadowColor = 'transparent';
});
requestAnimationFrame(animate);
}
// 处理窗口大小变化
window.addEventListener('resize', function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// 开始动画
animate();
</script>
</body>
</html>
效果如下，实际运行时动态的
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
