Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
khitsik
0 / 0 / 0
Регистрация: 14.12.2015
Сообщений: 1
1

Рисовать массив поэлементно с задержкой

22.01.2019, 02:26. Просмотров 805. Ответов 1
Метки нет (Все метки)

Пытаюсь рисовать матрицу из квадратов в canvas в зависимости от количества элементов массива.
Задача состоит в том, чтобы отрисовывать квадраты постепенно, т.е сначала arr[0][0], потом после небольшой задержки arr[0][1] и так далее.
У меня же рисуются все квадраты сразу. Даже если пытаюсь поставить задержку с помощью setTimeout(), после задержки появляются все квадраты, а не отрисовываются по одному.

Буду признателен за любые мысли по поводу этого. Спасибо.


Мой код:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var drawingCanvas = document.getElementById('myCanvas');
if(drawingCanvas && drawingCanvas.getContext) {
    var context = drawingCanvas.getContext('2d');
    var arr = <?=json_encode($arr) ?>;
    console.log(arr);
    var x = 0;
    var y = 50;
    var timer = 1000;
    function animate(){
        context.stroke();
        }
    for (var i = 0; i < arr.length; i++) {
        for (var j = 0; j < arr[i].length; j++) {
            context.rect(x, y, 50, 50);
            setTimeout(animate, timer);
            context.textAlign = "center";
            context.font = "12px Arial";
            context.fillStyle = "black";
            context.fillText(arr[i][j],x+25,y+28, 50);
            x = x + 50; 
            timer = timer+1000;
        }
        x=0;
        y=y+50;
    }
}
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
22.01.2019, 02:26
Ответы с готовыми решениями:

Вывод из бд с задержкой
В базе 100 000 строк +, нужно сделать что бы они выводили с задержкой в одну секунду. Т.е....

Запутался с задержкой события
Итак, есть кусок скрипта, который отвечает за присвоения активности пункту меню при наведении/ ...

Запуск скрипта с задержкой
Всем привет как запустить серверную функцию по js таймауту? пример: юзер перешел со стр. А на...

Вывод картинок с задержкой
не могу вывести картинки с задержкой. window.setTimeout не хочет работать именно в этом скрипте

Перемещение элемента с задержкой
Всем привет. Решил сделать плавное перемещение объекта для старых версий HTML (без jQuery), но...

1
8Observer8
2487 / 1592 / 272
Регистрация: 05.10.2013
Сообщений: 4,942
Записей в блоге: 72
27.01.2019, 16:19 2
Лучший ответ Сообщение было отмечено khitsik как решение

Решение

Playground

index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>
    <script src="main.js"></script>
</head>
 
<body>
    <h1>Drawing animation with Tween.js</h1>
    <canvas id="renderCanvas" width="256" height="256"></canvas>
</body>
 
</html>
main.js

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
var ctx;
var squareAlpha = 0;
 
function drawSquare(x, y, size, color) {
    ctx.beginPath();
    ctx.rect(x, y, size, size);
    ctx.fillStyle = color;
    ctx.fill();
}
 
function draw()
{
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.globalAlpha = squareAlpha / 255.0;
    drawSquare(0, 0, 50, "red");
    ctx.globalAlpha = 1.0;
}
 
function update(time) {
    requestAnimationFrame(update);
    TWEEN.update(time);
    draw();
}
 
function main() {
    console.log(document.getElementById("renderCanvas"));
    ctx = document.getElementById("renderCanvas").getContext("2d");
 
    requestAnimationFrame(update);
 
    var alpha = {
        value: 0
    }; // Start at 0
    var tween = new TWEEN.Tween(alpha) // Create a new tween that modifies 'alpha'.
    .to({
        value: 255
    }, 10000) // Move to (300, 200) in 1 second.
    .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
    .onUpdate(function() {
        // Called after tween.js updates 'alpha'.
        // Set transparency
        squareAlpha = alpha.value;
    })
    .start(); // Start the tween immediately.
}
main();
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
27.01.2019, 16:19

Автоматический редирект с сайта с большой задержкой
Добрый день Есть старый сайт, имеющий хороший рейтинг в поисковиках. Есть новый, на другом...

Скрипт меняет значение поля только с задержкой
Есть скрипт который должен после того как динамически сформирует поле input сразу менять его...

Прокрутка веб-страницы с задержкой. Landing Page
Здравствуйте, уважаемые форумчане! Я, мягко сказать, в программировании не шарю. Веб-дизайнер....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru