Question

我正在使用画布中的动画，我想把它变成一个简单的单词从纯文本变为无法解释的例子......纯黑色单词如此大胆的五彩字母。我尝试了什么...

HTML

<canvas id="ctx" height="500" width="500">

</canvas>

JS

var ctx = document.getElementById("ctx");
var word = ['H', 'e', 'l', 'l', 'o'];
ctx.fillText(word, 50, 50);
for (var i = 0; i < word.length; i++)
{
    ctx.font = "Comic Sans";
    ctx.strokeText(word, 50, 50);
}

我的目标是在几秒钟之后打印它，然后逐个更改文本

Answer 1

首先，你需要正确的背景。这可能是2D背景。

var ctx = document.getElementById("ctx").getContext("2d");

接下来，for循环只会阻止javascript的执行直到完成。它不会改变渲染。为此，您需要使用setInterval。

既然您每隔几秒就会执行一次代码，那么您的下一个问题就是您只是在上一次呈现的内容之上。您需要添加clearRect来删除之前的渲染，以查看新渲染内容。

Here is a very simple example in JSfiddle基于您的代码。

经过一段时间后，画布逐个更改元素

1 个答案: