Javascript 它早些时候还在工作，但不知怎的我把它弄坏了

HTML:

我们期望的是一个逐渐消失的正方形，中间有文字 正方形绘制正确，但不会褪色，文本也不会显示。 我使用代码笔进行编码。

---

这是可行的，但我想我试着添加了评论，而我在添加评论时做的某件事破坏了它。我还没有高中毕业，所以我没有任何大学经验，我所有的代码都是自学的，教程（谢谢w3schools.com）

你的代码中有两个错误

第一:

“var cnvs=document.getElementById（“画布”）；”

您的ID是--“var cnvs=document.getElementById（“cnvs”）

第二条：

在“var循环”中，有一个输入错误 “ctx.fillRect（0，0，windW，CnvsH）；”它应该是“CnvsH”而不是“CnvsH”

右->ctx.fillRect（0，0，windW，cnvsH）

---

Gl并尝试使用调试器。

“它在较早时工作，但不知何故我破坏了它”不是一个好的问题标题，请在其中指定问题。

<canvas id="cnvs" width=1 height=250 style="border:1px solid #000000;"></canvas>

//  Square size
var squareSize = 50;
//  Trail size (smaller number means more trail)
var globalAlpha = 0.0025;
//  Text
var text = "Lorem Ipsum";
console.clear();
var cnvs = document.getElementById("canvas");
var ctx = cnvs.getContext("2d");
var windW = window.innerWidth;
cnvs.width = windW - 20;
var cnvsH = cnvs.height;
function MouseMove(XMouse, YMouse) {
    console.clear();
    ctx.fillStyle = "#000000";
    ctx.globalAlpha = 1;
    ctx.fillRect(
        XMouse - 10 - squareSize / 2,
        YMouse - 10 - squareSize / 2,
        squareSize,
        squareSize
        );
}
function handler(e) {
    e = e || window.event;
    var pageX = e.pageX;
    var pageY = e.pageY;
    if (pageX === undefined) {
        pageX =
        e.clientX +
        document.body.scrollLeft +
        document.documentElement.scrollLeft;
        pageY =
        e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    console.log(pageX, pageY);
    MouseMove(pageX, pageY);
}
if (document.attachEvent) document.attachEvent("onmousemove", handler);
else document.addEventListener("mousemove", handler);
var loop = setInterval(function() {
    ctx.fillStyle = "#FFFFFF";
    ctx.globalAlpha = globalAlpha;
    ctx.fillRect(0, 0, windW, CnvsH);
    ctx.font = "100px Arial";
    ctx.globalAlpha = 1;
    ctx.fillStyle = "#000000";
    ctx.textAlign = "center";
    ctx.fillText(text, windW / 2, cnvsH / 2);
}, 10);