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

我为它做了一个小提琴，所以检查一下：

Working Fiddle

以下是已编辑的代码。我所做的就是清除第二个函数调用中的第一个函数区间，反之亦然。

<强>脚本

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 个答案: