Javascript 如何在HTML画布中使文本淡出_Javascript_Html_Canvas_Fadeout

Javascript 如何在HTML画布中使文本淡出

javascript html canvas

Javascript 如何在HTML画布中使文本淡出,javascript,html,canvas,fadeout,Javascript,Html,Canvas,Fadeout,我正在尝试开发一个在线web应用程序Patatap的克隆，我想在用户加载页面时向他们显示5秒钟的说明，然后让页面淡出这就是我到目前为止所做的： HTML: 我不明白为什么我的文本没有显示和淡出，我是Javascript新手，所以任何帮助/建议都将不胜感激非常感谢 $（“#context”）.fadeOut（）正在查找id为“context”的元素。没有这样的元素。您的画布的id为“myCanvas”。所以试试$（“#myCanvas”）.fadeOut（）。另外，至少在测试中，背景是白色的，

我正在尝试开发一个在线web应用程序Patatap的克隆，我想在用户加载页面时向他们显示5秒钟的说明，然后让页面淡出

这就是我到目前为止所做的：

HTML:

我不明白为什么我的文本没有显示和淡出，我是Javascript新手，所以任何帮助/建议都将不胜感激

非常感谢

$（“#context”）.fadeOut（）正在查找id为“context”的元素。没有这样的元素。您的画布的id为“myCanvas”。所以试试$（“#myCanvas”）.fadeOut（）。另外，至少在测试中，背景是白色的，所以用白色绘制的文本不会显示出来。以下内容有效，填充样式更改为红色：


var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
context.fillStyle=“红色”；
context.font=“常规40px查询”；
context.textAlign=“中心”；
context.fillText（“按a-z键播放一首曲子！”，canvas.width/2，canvas.height/2）；
var fade_out=函数（）{
$（“#myCanvas”）.fadeOut（）；
}
设置超时（淡出，5000）；

您正在使用jQuery吗？请加上那个标签。

<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>

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

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