如何在 HTML canvas 中使文本淡出

Question

我正在尝试开发在线网络应用程序 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;
}

我不明白为什么我的文字不显示和淡出，我是 Javascript 的新手，所以任何 help/suggestions 将不胜感激。

非常感谢！

Answer 1

$("#context").fadeOut() 正在寻找 ID 为 'context' 的元素。没有这样的元素。您的 canvas 的 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 中使文本淡出

How to make text fadeout in HTML canvas

html

javascript

canvas

fadeout