Question

我正在尝试开发在线Web应用程序Patatap的克隆，我希望在用户加载页面然后让页面淡出时向用户显示5秒钟的说明。

这是我到目前为止所拥有的：

HTML：

<body>

<canvas id="myCanvas" resize></canvas>

<script>

    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    context.fillStyle = "white";
    context.font = "regular 40px Questrial";
    context.textAlign = "center";
    context.fillText("Press 'a-z' keys to play a tune!", canvas.width/2, canvas.height/2);

    var fade_out = function() {
        $("#context").fadeOut().empty();
    }

    setTimeout(fade_out, 5000);

</script>

</body>

CSS：

canvas {
width: 100%;
height: 100%;
background-color: black;
}

body, html {
    height: 100%;
    margin: 0;
}

我不知道为什么我的文本没有显示和消失，我是Java语言的新手，所以任何帮助/建议都将不胜感激。

非常感谢！

Answer 1

$（“＃context”）。fadeOut（）正在寻找ID为'context'的元素。没有这样的元素。您的画布的ID为“ myCanvas”。因此，尝试$（“＃myCanvas”）。fadeOut（）。另外，至少在测试中，背景为白色，因此以白色显示文本不会显示。下面的方法起作用，并且fillStyle更改为红色：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>	
</head>
<body>

<canvas id="myCanvas" resize></canvas>

<script>

    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    context.fillStyle = "red";
    context.font = "regular 40px Questrial";
    context.textAlign = "center";
    context.fillText("Press 'a-z' keys to play a tune!", canvas.width/2, canvas.height/2);

    var fade_out = function() {
        $("#myCanvas").fadeOut();
    }

    setTimeout(fade_out, 5000);

</script>

</body>

如何使文本在HTML canvas中淡出

1 个答案: