Как сделать затухание текста в холсте HTML - PullRequest
Новая
       9

Как сделать затухание текста в холсте HTML

0 голосов
/ 25 августа 2018

Я пытаюсь разработать клон веб-приложения 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, поэтому любая помощь / предложения будут с благодарностью.

Большое спасибо!

1 Ответ

0 голосов
/ 25 августа 2018

$ ("# context"). FadeOut () ищет элемент с идентификатором "context". Там нет такого элемента. Ваш холст имеет идентификатор «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>
...