Как очистить fillText, который установлен в Interval?

Это простой код для анимации строки текста на холсте, но когда я использую clearRect, он все еще остается на холсте и не стирается.Как очистить fillText, который установлен в Interval?

Вот 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.

У вас есть какие-либо советы/идеи о том, как я должен идти об очистке текста?

источник

2014-01-27 Coolai

Почему вы удалите jsfiddle? –

, вы должны определенно очистить интервалы после того, как вы закончите с ними, используя 'clearInterval' – epoch

@ ZachSaucier Извините. Обновлено. – Coolai

Я сделал скрипку так проверить это:

Working Fiddle

И ниже отредактированный код. Все, что я сделал, это очистить первый интервал функций во втором вызове функций и наоборот.

Script

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

источник

2014-01-27 14:32:49

Спасибо, сэр! Но я столкнулся с ошибкой. Если я дважды щелкнуть кнопку «Перерос», а затем перейти к другой кнопке, останется старый текст. – Coolai

Упс ... Позвольте мне взглянуть на него и вернуться к вам. –

Посмотрите на это обновление скрипта http://jsfiddle.net/8PStb/11/ –

Как очистить fillText, который установлен в Interval?

ответ

Смежные вопросы