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

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

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

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

JavaScript
1
2
3
4
5
6
7
8
        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
1
2
3
4
5
6
7
8
9
        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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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
1
2
3
4
5
6
7
8
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
1
2
3
4
5
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
1
2
3
4
5
6
7
8
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
1
2
3
4
5
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
1
2
3
4
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
1
2
3
4
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
1
2
3
4
5
6
function updateVar(){
   date = new Date();
   ...
   ...
   ...
}

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

JavaScript
1
2
3
4
5
6
7
8
9
function callAnimate()
{
   animate1();
   animate2();
   animate3();
   ...
   ...
   ...
}

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

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

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

JavaScript
1
setInterval('wrapper()',1000)

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

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

JavaScript
1
2
3
4
5
function animate1(){
 setInterval('pdateVar();',1000);
 // анимация
 
}

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

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

Новые блоги и статьи Все статьи Все блоги /
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .

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

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

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

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

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