生日祝福网站五彩纸屑（Confetti）动画仅显示在屏幕下半部分的修复方案求助

嘿，我明白你遇到的问题啦——你的五彩纸屑动画只出现在屏幕下半部分，其实是因为用来渲染动画的canvas元素没有设置正确的定位，导致它被页面里的文本和图片挤到了页面底部，所以只有下半部分能看到效果！

问题根源 #

你当前创建canvas时的样式只设置了display:block;z-index:999999;pointer-events:none，但缺少固定定位的属性，canvas会跟着文档流排列在页面内容的下方，自然只能露出下半部分。

修复步骤 #

1. 修改Canvas的定位样式 #

在创建canvas的代码里，给style属性加上position:fixed;top:0;left:0;，让canvas固定覆盖整个视口：

canvas.setAttribute("style", "display:block;position:fixed;top:0;left:0;z-index:999999;pointer-events:none");

2. 确保页面高度铺满视口 #

为了避免页面出现滚动条或者高度不足的问题，在你的<style>标签里添加以下CSS，确保html和body铺满整个屏幕：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
}

修改后的完整代码示例 #

调整后的Confetti代码片段（关键部分） #

function startConfettiInner() {
 var width = window.innerWidth;
 var height = window.innerHeight;
 window.requestAnimFrame = (function() {
 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
 return window.setTimeout(callback, 16.6666667);
 };
 })();
 var canvas = document.getElementById("confetti-canvas");
 if (canvas === null) {
 canvas = document.createElement("canvas");
 canvas.setAttribute("id", "confetti-canvas");
 // 这里是修改后的样式
 canvas.setAttribute("style", "display:block;position:fixed;top:0;left:0;z-index:999999;pointer-events:none");
 document.body.appendChild(canvas);
 canvas.width = width;
 canvas.height = height;
 window.addEventListener("resize", function() {
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 }, true);
 }
 // 剩余代码不变...
}

调整后的HTML头部样式 #

<head>
 <!--emoji-->
 <meta charset="UTF-8">
 <!--title-->
 <title>&#127881;Happy Birthday&#127881;</title>
 <!--animation-->
 <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
 <!--favicon-->
 <link rel="icon" type="image/x-icon" href="Images/favicon.ico">
 <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
 <!--confetti animation-->
 <script src="confetti.js"></script>
 <!--CSS-->
 <style>
 html, body {
   margin: 0;
   padding: 0;
   height: 100%;
   overflow-x: hidden;
 }
 </style>
</head>

这样修改之后，五彩纸屑就会从整个屏幕的上方开始下落，铺满整个视口啦！

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