1

Подскажите, не получается сделать плавную анимацию на canvas. что я хочу : при нажатии мышкой появляется круг который плавно увеличивается в радиусе и при достижении 50 скрывается. у меня же получается обновление только при повторном нажатии мышкой. что я делаю не так??

https://codepen.io/RedSkyby/pen/vrpZbq

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

        var radius = 20;

        canvas.width = window.innerWidth;
        canvas.height= window.innerHeight;

//        code

        canvas.addEventListener('mousedown', function drawCircle(e){

            ctx.beginPath();
            ctx.arc(e.clientX, e.clientY, radius, 0 , Math.PI * 2);
            ctx.closePath();
            ctx.fill();

          // тут я сбрасываю радиус
           radius += 5;
            if (radius > 50) {
                ctx.clearRect(0,0, mainCanvas.width,canvasHeight);

  }  
          // повториение анимации
        requestAnimationFrame(drawCircle);
   });

1 ответ 1

2

Принцип единой отвественности нарушен, у вас одна и та же функция пытается выполнится сначала как обработчик клика, а потом как колбек requestAnimationFrame. Ну и пара синтаксических ошибок, но это мелочи.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x, y, radius = 10;

canvas.width = window.innerWidth;
canvas.height= window.innerHeight;


canvas.addEventListener('mousedown', function(e){
  // В функции обработчике клика мы только устанавливаем координаты центра
  x = e.clientX;
  y = e.clientY;
  // и запускаем анимацию
  drawCircle();
});

// А эта функция пусть рисует круг.
// Если передавать эту функцию в requestAnimationFrame, 
// то её аргументом будет время, прошедшее с прошлого вызова, а не event click
function drawCircle(dt){
  ctx.beginPath();
  ctx.arc(x, y, radius, 0 , Math.PI * 2);
  ctx.closePath();
  ctx.fill();
  radius += 5;
  if (radius > 150) {
    ctx.clearRect(0,0, canvas.width, canvas.height);
    radius = 0;
    return;
  }
  requestAnimationFrame(drawCircle);
}
*{
  margin: 0;
  padding: 0;
}
        
canvas{
   display: block;
}
<canvas id="canvas"></canvas>

Ваш ответ

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

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