Javascript 如何清除设置间隔的fillText？_Javascript_Html_Canvas

Javascript 如何清除设置间隔的fillText？

javascript html canvas

Javascript 如何清除设置间隔的fillText？,javascript,html,canvas,Javascript,Html,Canvas,这是一个简单的代码，可以在画布上设置一行文本的动画，但是当我使用clearect时，它仍然保留在画布上，不会被擦除以下是WebApp： <title>Error Clearing FillText</title> <script type="text/javascript"> var c, ctx, episode; var map01 = "Overgrown...", map02 = "Flood Zone..."; fun

这是一个简单的代码，可以在画布上设置一行文本的动画，但是当我使用

clearect

时，它仍然保留在画布上，不会被擦除

以下是WebApp：

<title>Error Clearing FillText</title>

<script type="text/javascript">

    var c, ctx, episode;
    var map01 = "Overgrown...", map02 = "Flood Zone...";

    function load() {
        c = document.getElementById("canvas");
        ctx = c.getContext("2d");
        episode = document.getElementById("episode");
        ctx.clearRect(0, 0, 400, 240);
        ctx.drawImage(episode, 10, 5);
        ctx.font = "20px san-serif";
        ctx.fillStyle = "white";
    }

    var nameCharCount1 = 0, nameCharCount2 = 0;

    function funcMap01() {
        ctx.clearRect(0, 0, 400, 240);
        ctx.drawImage(episode, 10, 5);
        setInterval('loadMap01()', 70);
    }

    function funcMap02() {
        ctx.clearRect(0, 0, 400, 240);
        ctx.drawImage(episode, 10, 5);
        setInterval('loadMap02()', 70);
    }

    function loadMap01() {
        nameCharCount1++;
        var text = map01.substring(0, nameCharCount1);
        ctx.setFillStyle = "0";
        ctx.fillText(text, 16, 25);
    }

    function loadMap02() {
        nameCharCount2++;
        var text = map02.substring(0, nameCharCount2);
        ctx.setFillStyle = "0";
        ctx.fillText(text, 16, 25);
    }

    addEventListener("load", load, false);
</script>

</head>
<body>

    <canvas id="canvas" width="400" height="240" style="border: 1px solid #000000;">
    </canvas>
    <br>
    <button onclick="funcMap01();">Overgrown...</button>
    <button onclick="funcMap02();">Flood Zone...</button>
    <h1>I hate arrays..</h1>

</body>

    <img id="episode" src="http://i717.photobucket.com/albums/ww176/T3ZTAM3NT/Episode_zps4fa66a1b.png" style="display: none;">

清除填充文本时出错变量c、ctx、事件； var map01=“杂草丛生…”，map02=“洪水区…”；函数加载（）{ c=document.getElementById（“画布”）； ctx=c.getContext（“2d”）；事件=document.getElementById（“事件”）； ctx.clearRect（0,0400240）； ctx.drawImage（第10集，第5集）； ctx.font=“20px san serif”； ctx.fillStyle=“白色”； } 变量nameCharCount1=0，nameCharCount2=0；函数funcMap01（）{ ctx.clearRect（0,0400240）； ctx.drawImage（第10集，第5集）； setInterval（'loadMap01（）'，70）； } 函数funcMap02（）{ ctx.clearRect（0,0400240）； ctx.drawImage（第10集，第5集）； setInterval（'loadMap02（）'，70）； } 函数loadMap01（）{ nameCharCount1++； var text=map01.substring（0，nameCharCount1）； ctx.setFillStyle=“0”； ctx.fillText（文本，16,25）； } 函数loadMap02（）{ nameCharCount2++； var text=map02.substring（0，nameCharCount2）； ctx.setFillStyle=“0”； ctx.fillText（文本，16,25）； } addEventListener（“加载”，加载，错误）；
杂草丛生。。。洪水区。。。我讨厌数组。。

你有什么关于我应该如何清理文本的提示/想法吗？

我为它做了一把小提琴，请查看以下内容：

下面是经过编辑的代码。我所做的只是清除了第二个函数调用中的第一个函数间隔，反之亦然

脚本

var c, ctx, episode;
var map01 = "Overgrown...", map02 = "Flood Zone...";
var interval1,interval2;
function load() {
    c = document.getElementById("canvas");
    ctx = c.getContext("2d");
    episode = document.getElementById("episode");
    ctx.clearRect(0, 0, 400, 240);
    ctx.drawImage(episode, 10, 5);
    ctx.font = "20px san-serif";
    ctx.fillStyle = "white";
}

var nameCharCount1 = 0, nameCharCount2 = 0;

function funcMap01() {
    clearInterval(interval2);
    ctx.clearRect(0, 0, 400, 240);
    ctx.drawImage(episode, 10, 5);
    interval1=setInterval('loadMap01()', 70);
}

function funcMap02() {
    clearInterval(interval1);
    ctx.clearRect(0, 0, 400, 240);
    ctx.drawImage(episode, 10, 5);
    interval2=setInterval('loadMap02()', 70);
}

function loadMap01() {
    nameCharCount1++;
    var text = map01.substring(0, nameCharCount1);
    ctx.setFillStyle = "0";
    ctx.fillText(text, 16, 25);
}

function loadMap02() {
    nameCharCount2++;
    var text = map02.substring(0, nameCharCount2);
    ctx.setFillStyle = "0";
    ctx.fillText(text, 16, 25);
}

addEventListener("load", load, false);

为什么要删除JSFIDLE？在使用

clearInterval

@Zachsauier处理完间隔后，您肯定应该清除这些间隔。对此，我很抱歉。更新。非常感谢您，先生！但是我遇到了一个错误。如果我双击“过度生长”按钮，然后继续单击另一个按钮，则旧文本将保留。哎呀。。。让我看看，然后再回来找你。