HTML5 рисунок с функцией «воспроизведения» - PullRequest
Новая
       4

HTML5 рисунок с функцией «воспроизведения»

1 голос
/ 25 октября 2010

Я пытаюсь реализовать приложение для рисования html5.В настоящее время я могу разрешить сохранение нарисованного изображения.Я хочу иметь возможность воспроизведения, которая перерисовывает изображение так же, как оно было изначально нарисовано, почти как если бы это было видео.Есть идеи?

Ответы [ 2 ]

1 голос
/ 27 октября 2010

Я думаю, что любое действие, которое приводит к рисованию на холсте, вы просто сохраняете в упорядоченном массиве.

Затем вы можете пройти по массиву и повторить.

1 голос
/ 25 октября 2010

У Canvas нет дерева DOM, как предлагает Джони.Canvas рисует пиксели, поэтому вы не можете извлекать или перемещать отдельные объекты после их отрисовки.

Вы можете сохранить кадр с помощью canvas.getImageData () в массив, а затем позже восстановить эти кадры в том же порядке, используя canvas.putImageData ().Хотя я не уверен, насколько хорошо это работает с большим размером холста.

Пример: 

// Start with an array where you'll save all frames.
var frames = [];

// Save the output of your canvas to the frames array. Do this every X seconds or X amount of drawing.
var frame = myCanvasElement.getImageData(0, 0, myCanvasElement.width, myCanvasElement.height);
frames.push(frame);

// When the user is done drawing, you can do a replay by restoring the frames one by one in a certain interval.
var fps = 15;
var i = 0;
var myInterval = setInterval(function()
{
    myCanvasElement.putImageData(frames[i], 0, 0);

    i++;
    if (i == frames.length)
    {
        // We've played all frames.
        clearInterval(myInterval);
    }
}, 1000 / fps);
...