如何清除setInterval的fillText？

Question

這是一個簡單的代碼，用於動畫畫布中的一行文本，但是當我使用clearRect它仍然保留在畫布上並且不會被刪除。

這是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;">

的jsfiddle。

關於如何清理文本，您有任何提示/想法嗎？

Answer 1

我做了一個小提琴，所以檢查一下：

工作小提琴

以下是編輯過的代碼。 我所做的就是清除第二個函數調用中的第一個函數區間，反之亦然。

腳本

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

如何清除setInterval的fillText？

問題描述

1 個解決方案

解決方案1
3 已采納 2014-01-27 14:32:49

如何清除setInterval的fillText？

問題描述

1 個解決方案

解決方案1 3 已采納 2014-01-27 14:32:49

解決方案1
3 已采納 2014-01-27 14:32:49