Question

HTML：

//  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);

JS：

{{1}}

可以预见的是一个逐渐消失的正方形，中间带有文本正方形已正确绘制，但不会发生褪色，也不会显示文本。我使用codepen进行编码。它正在运行，但是我想我尝试添加评论，而这样做却破坏了它。我没有高中毕业，所以我没有任何大学经验，我所有的编码都是自学成才和教程（感谢w3schools.com）

Answer 1

您的代码中有2个错误。

第一：

“ var cnvs = document.getElementById（” canvas“）;”

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

和secound：

在您的“ var loop”中，有一个打字错误 “ ctx.fillRect（0，0，windW，CnvsH）;”应该是“ cnvsH”，而不是“ CnvsH”。

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

GL，并尝试使用调试器。

它可以更早地工作，但是我以某种方式中断了它

1 个答案: