繁体   English   中英

如何清除setInterval的fillText?

[英]How to clear the fillText that is setInterval?

这是一个简单的代码,用于动画画布中的一行文本,但是当我使用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。

关于如何清理文本,您有任何提示/想法吗?

我做了一个小提琴,所以检查一下:

工作小提琴

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

脚本

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM