2

Здравствуйте. Надо нарисовать с помощью Canvas и JavaScript анимацию падающего примитива. Так вот. Как сделать так, чтобы он не оставлял предыдущее состояние?

Фрагмент кода

var ctx = document.querySelector("canvas").getContext('2d');

ctx.lineWidth = 2;
function draw()
{
  var y = 0;

  function frame()
  {
    ctx.beginPath();
    ctx.arc(100, 100+y, 20, 0, 2*3.14);
    ctx.stroke();
    ctx.fill();
    ctx.closePath();
    y+=5;
    if (y >= 100) clearTimeout(timer);

  }
  var timer = setInterval(frame, 50);
}
draw();
<canvas width=200 height=200>
</canvas>

Могу предоставить весь код, если надо. То, что получилось:

Результат работы.

18
  • setInterval ... clearTimeout - баг.
    – Qwertiy
    29 мар 2016 в 13:17
  • @Qwertiy можно поподробнее? 29 мар 2016 в 13:18
  • Это не по теме баг. А по теме - надо очищать всё отрисованное и рисовать заново. Либо использовать метод сохранения отрисованного и его восстановления.
    – Qwertiy
    29 мар 2016 в 13:20
  • @Qwertiy Как можно сохранять и восстанавливать? ctx.save(); ctx.restore() ? 29 мар 2016 в 13:23
  • Нет. Эта пара сохраняет параметры контекста, но не рисунок. Есть другая.
    – Qwertiy
    29 мар 2016 в 13:24

1 ответ 1

3

Метод getImageData позволяет запомнить отображённую картинку, а putImageData - восстановить её:

~function () {
  var canvas = document.querySelector("canvas");
  var ctx = canvas.getContext('2d');

  ctx.lineWidth = 2;

  function draw() {
    var y = 0;

    ctx.fillStyle = 'red';
    ctx.fillRect(20, 20, 150, 100);

    var state = ctx.getImageData(0, 0, canvas.width, canvas.height);
    
    function frame() {
      ctx.putImageData(state, 0, 0);
      
      ctx.beginPath();
      ctx.fillStyle = 'blue';
      ctx.arc(100, 100+y, 20, 0, 2*3.14);
      ctx.stroke();
      ctx.fill();
      ctx.closePath();

      y+=5;
      if (y >= 100) clearInterval(timer);
    }

    var timer = setInterval(frame, 50);
  }

  draw();
}();
canvas {
  border: 1px dotted green;
}
<canvas width=200 height=230>
</canvas>

1
  • Вроде всё работает с этим кодом. Спасибо. 29 мар 2016 в 20:12

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.