Передать переменную для анимации canvas

@zhukovka · Регистрация: 05.10.2011

Author24 — интернет-сервис помощи студентам

помогите пожалуйста!
у меня есть код:

Javascript

        var date = new Date();
        function gagaga(){
            setInterval(draw, 1000)
        }
        function draw(){
            ctx.clearRect(0, 0, 500, 500);
            ctx.fillText(date, 100, 100)
        }

и главная задача - переменную date не писать внутрь функции draw, как переменную передать так, чтоб она осталась на том же месте где сейчас и draw каждую секунду брала новую дату?

@djdish · 05.10.2011, 12:24

Сообщение от zhukovka

и главная задача - переменную date не писать внутрь функции draw, как переменную передать так, чтоб она осталась на том же месте где сейчас и draw каждую секунду брала новую дату?

Javascript

        var date;
        function gagaga(){
date = new Date();
            setInterval(draw, 1000)
        }
        function draw(){
            ctx.clearRect(0, 0, 500, 500);
            ctx.fillText(date, 100, 100)
        }

при каждом вызове gagaga будет браться дата

@zhukovka · 05.10.2011, 12:27 **[ТС]**

пробовала - не работает

@djdish · 05.10.2011, 12:31

у вас джаваскрипт где подключается в head или по ходу пьесы?
если в head то должно работать, при загрузке страницы инициализируется переменная

попробуйте в draw вывести alert(date);
че напишет

@zhukovka · 05.10.2011, 12:35 **[ТС]**

если я засуну скрипт в head он не будет вынимать канву, потому он у меня после всего
он берет дату, но не берет ее снова и снова новую каждую секунду

@djdish · 05.10.2011, 12:40

пропиши в head

Javascript

1
2
3

<script language='javascript'>
var date;
</script>

может заработает
из нижнего скрипта удали соответственно эту строку чтобы не переинициализировались переменные

@Vicont · 05.10.2011, 12:47

Так, к слову:

Сообщение от djdish

Не используется, используется:

HTML5

1	<script type='text/javascript'>

@zhukovka · 05.10.2011, 12:50 **[ТС]**

Сообщение от djdish

пропиши в head

Javascript

1
2
3

<script language='javascript'>
var date;
</script>

может заработает
из нижнего скрипта удали соответственно эту строку чтобы не переинициализировались переменные

не заработало(

@djdish · 05.10.2011, 12:55

тогда полный html страницы в студию

@zhukovka · 05.10.2011, 12:57 **[ТС]**

Сообщение от djdish

тогда полный html страницы в студию

вообще, ничего кроме этого скрипта в странице нет, но вот он

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>21</title>
        <script>date = new Date();</script>
    </head>
    <body>
        <canvas id="canvas" width="500" height="500">
    </body>
    <script>
        var ctx = document.getElementById('canvas').getContext('2d');
 
        function gagaga(){
            setInterval(drawString, 1000)
        }
 
        function drawString(){
            ctx.clearRect(0, 0, 500, 500);
            ctx.fillText(date, 100, 100)
        }
    </script>
</html>

@Vicont · 05.10.2011, 13:01

А с чего этот код должен каждый раз показывать новую дату?

Javascript

var date = new Date();
  function gagaga(){
    setInterval(draw, 1000)
  }
  function draw(){
    ctx.clearRect(0, 0, 500, 500);
    ctx.fillText(date, 100, 100)
  }

Текущая дата устанавливается один раз в:

Javascript

1	var date = new Date();

Чтобы она генерировалась при каждом запуске draw:

Javascript

function draw(){
    var date = new Date();
    ctx.clearRect(0, 0, 500, 500);
    ctx.fillText(date, 100, 100)
  }

@zhukovka · 05.10.2011, 13:11 **[ТС]**

Сообщение от Vicont

А с чего этот код должен каждый раз показывать новую дату?

Javascript

var date = new Date();
  function gagaga(){
    setInterval(draw, 1000)
  }
  function draw(){
    ctx.clearRect(0, 0, 500, 500);
    ctx.fillText(date, 100, 100)
  }

Текущая дата устанавливается один раз в:

Javascript

1	var date = new Date();

Чтобы она генерировалась при каждом запуске draw:

Javascript

function draw(){
    var date = new Date();
    ctx.clearRect(0, 0, 500, 500);
    ctx.fillText(date, 100, 100)
  }

в том-то и задача - я написала сверху - мне надо оставить переменную на месте и как-то заставить функцию draw ее постоянно брать

@Vicont · 05.10.2011, 13:16

Сообщение от zhukovka

заставить функцию draw ее постоянно брать

Она и так будет ее брать, только я не понимаю зачем нужна эта переменная как глобальная.
Можно и так сделать:

Javascript

function draw(){
    ctx.clearRect(0, 0, 500, 500);
    ctx.fillText(new Date(), 100, 100)
  }

P.S. И <canvas> из HTML5 а у Вас DOCTYPE HTML4.01
Поставьте:

HTML5

1	<!DOCTYPE html>

@zhukovka · 05.10.2011, 13:29 **[ТС]**

Сообщение от Vicont

Она и так будет ее брать, только я не понимаю зачем нужна эта переменная как глобальная.
Можно и так сделать:

Javascript

function draw(){
    ctx.clearRect(0, 0, 500, 500);
    ctx.fillText(new Date(), 100, 100)
  }

P.S. И <canvas> из HTML5 а у Вас DOCTYPE HTML4.01
Поставьте:

HTML5

1	<!DOCTYPE html>

потому что это только этот файл такой простой и маленький, а у меня будет много функций для анимации, которые используют одинаковые переменные, каждую из которых нужно будет брать посекундно и прописывать их постоянно в функции мне не нравится, должен быть способ объявить глобальную переменную и заставить функцию брать ее каждый раз

@Vicont · 05.10.2011, 13:42

Сообщение от zhukovka

заставить функцию брать ее каждый раз

Она будет ее брать каждый раз, но с одним и тем же значением.
Чтобы так сделать нужно каждую секнду изменять глобальную переменную date:

Javascript

1	setInterval("date=new Date()",1000)

@zhukovka · 05.10.2011, 13:58 **[ТС]**

Сообщение от Vicont

Она будет ее брать каждый раз, но с одним и тем же значением.
Чтобы так сделать нужно каждую секнду изменять глобальную переменную date:

Javascript

1	setInterval("date=new Date()",1000)

Спасибо!
это именно то что мне надо было, и если этих переменных 100500 можно запихнуть их все допустим в одну функцию...

@Vicont · 05.10.2011, 14:12

Лучше сделать так. У Вас к примеру есть куча функций с анимацией:

Javascript

1	animate()1, animate2(), animate3(), animate4()....

Так же есть куча переменных "типа даты"

Создаете функцию с этими переменными:

Javascript

function updateVar(){
   date = new Date();
   ...
   ...
   ...
}

Создаете функцию с вызовом всех функций анимации:

Javascript

function callAnimate()
{
   animate1();
   animate2();
   animate3();
   ...
   ...
   ...
}

Создаете функцию "обертку"

Javascript

function wrapper()
{
   updateVar(); //Обновляем переменные
   callAnimate() //Включаем анимацию
}

И ставим таймер

Javascript

1	setInterval('wrapper()',1000)

P.S. Это если все функции анимации запускать одновременно.

Если для каждую анимацию запускать отдельно то

Javascript

function animate1(){
 setInterval('pdateVar();',1000);
 // анимация
 
}

@zhukovka · 05.10.2011, 14:56 **[ТС]**

дадада так и делаю
спасибо

@zhukovka 0 / 0 / 0 Регистрация: 05.10.2011 Сообщений: 9
	05.10.2011, 14:56 [ТС]	18
	дадада так и делаю спасибо 0

@zhukovka 0 / 0 / 0 Регистрация: 05.10.2011 Сообщений: 9
	05.10.2011, 12:27 [ТС]	3
	пробовала - не работает 0

@djdish 93 / 93 / 9 Регистрация: 20.02.2011 Сообщений: 210
	05.10.2011, 12:31	4
	у вас джаваскрипт где подключается в head или по ходу пьесы? если в head то должно работать, при загрузке страницы инициализируется переменная попробуйте в draw вывести alert(date); че напишет 0

@zhukovka 0 / 0 / 0 Регистрация: 05.10.2011 Сообщений: 9
	05.10.2011, 12:35 [ТС]	5
	если я засуну скрипт в head он не будет вынимать канву, потому он у меня после всего он берет дату, но не берет ее снова и снова новую каждую секунду 0

@djdish 93 / 93 / 9 Регистрация: 20.02.2011 Сообщений: 210
	05.10.2011, 12:55	9
	тогда полный html страницы в студию 0