canvas-confetti 无法全屏居中显示且图形变形问题求助

核心问题分析 #

• 礼花仅显示在左上角：canvas元素默认定位/尺寸未覆盖全屏，且未正确设置发射原点
• 设100%宽高后图形变形：CSS设置的宽高与canvas自身width/height属性不匹配，导致画布被拉伸

具体解决方案 #

1. 正确配置容器与发射原点 #

无需手动修改canvas元素，通过confetti配置指定全屏容器并设置居中发射点：

// 创建全屏容器
const confettiContainer = document.createElement('div');
confettiContainer.style.position = 'fixed';
confettiContainer.style.top = '0';
confettiContainer.style.left = '0';
confettiContainer.style.width = '100vw';
confettiContainer.style.height = '100vh';
confettiContainer.style.pointerEvents = 'none'; // 不阻挡页面交互
confettiContainer.style.zIndex = '9999';
document.body.appendChild(confettiContainer);

// 初始化礼花，指定居中发射
confetti({
  particleCount: 120,
  spread: 80,
  origin: { 
    x: 0.5, // 水平居中（0=左，1=右）
    y: 0.5  // 垂直居中（0=上，1=下）
  },
  canvas: confettiContainer.appendChild(document.createElement('canvas'))
});

2. 动态适配窗口尺寸 #

监听窗口 resize 事件，同步更新canvas实际像素尺寸，避免变形：

function syncCanvasSize() {
  const canvas = document.querySelector(confettiContainer.querySelector('canvas'));
  if (canvas) {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
}

window.addEventListener('resize', syncCanvasSize);
// 初始化时执行一次
syncCanvasSize();

3. 简化全局配置方案 #

不想手动管理容器的话，直接用confetti内置的全屏配置：

// 重置默认配置并创建画布实例
const fullscreenConfetti = confetti.create({
  resize: true, // 自动适配窗口大小
  useWorker: true // 可选：用Web Worker提升性能
});

// 触发居中礼花
fullscreenConfetti({
  particleCount: 150,
  spread: 90,
  origin: { x: 0.5, y: 0.5 }
});

关键注意事项 #

• 禁止直接给canvas设置width: 100%; height: 100%;的CSS样式，必须让canvas的width/height属性等于窗口实际像素尺寸，CSS仅用于控制显示占满全屏
• 必须设置pointerEvents: none，避免礼花层阻挡页面交互
• origin是控制发射位置的核心，x/y设为0.5即可实现居中发射

内容的提问来源于stack exchange，提问作者Janani