// 字符到坐标映射表(简化版)
const charMap = {
'我': [[10,10],[15,12],[20,8],...], // 实际需完整字符轮廓数据
'爱': [[5,5],[12,18],[22,10],...],
'你': [[8,12],[18,8],[15,20],...]
};
// 初始化画布
const canvas = document.getElementById('starCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 生成星空背景
function createStars() {
const stars = [];
for (let i = 0; i < 200; i++) {
stars.push({
x: Math.random() canvas.width,
y: Math.random() canvas.height,
size: Math.random() 2,
alpha: Math.random()
});
}
return stars;
}
// 渲染星空
function drawStars(stars) {
ctx.fillStyle = 'rgba(0,0,0,0.8)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
stars.forEach(star => {
ctx.fillStyle = `rgba(255,255,255,${star.alpha})`;
ctx.beginPath();
ctx.arc(star.x, star.y, star.size, 0, Math.PI 2);
ctx.fill();
});
}
// 渲染文字粒子
function drawTextParticles(text) {
const fontSize = 80;
ctx.font = `bold ${fontSize}px "Microsoft YaHei"`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// 获取文字路径
ctx.save();
ctx.translate(canvas.width/2, canvas.height/2);
ctx.scale(1, -1); // 翻转Y轴适配Canvas坐标系
ctx.fillText(text, 0, 0);
ctx.restore();
// 获取像素数据
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const pixels = imageData.data;
// 提取非透明像素坐标
const particles = [];
for (let y = 0; y < canvas.height; y += 4) {
for (let x = 0; x < canvas.width; x += 4) {
if (pixels[(y canvas.width + x) 4 + 3] > 128) {
particles.push({ x, y, baseX: x, baseY: y });
}
}
}
return particles;
}
// 动画主循环
const stars = createStars();
const particles = drawTextParticles('我爱你的文案代码');
function animate() {
drawStars(stars);
particles.forEach((p, i) => {
// 缓慢漂移效果
p.x += (Math.random() - 0.5) 0.8;
p.y += (Math.random() - 0.5) 0.8;
// 保持整体形状约束
if (i % 10 === 0) {
p.x = p.baseX + (Math.random() - 0.5) 3;
p.y = p.baseY + (Math.random() - 0.5) 3;
}
ctx.fillStyle = '#a30000';
ctx.beginPath();
ctx.arc(p.x, p.y, 1.5, 0, Math.PI 2);
ctx.fill();
});
requestAnimationFrame(animate);
}
animate();
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});