анимация на canvas

185
25 июля 2018, 02:40

Подскажите, не получается сделать плавную анимацию на 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);
   });
Answer 1

Принцип единой отвественности нарушен, у вас одна и та же функция пытается выполнится сначала как обработчик клика, а потом как колбек 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>

READ ALSO
Не работает счетчик мин вокруг
HTML

Не работает счетчик мин вокруг

Кол-во мин вокруг каждой записывается gamefield[x][y]

 365
Не могу задать стили элементу который имеется в двух классов
HTML

Не могу задать стили элементу который имеется в двух классов

Я использую такой код для классовregister,

 155
Не двигается input
HTML

Не двигается input

Почему с помощью свойства margin-top: -Xpx не получается передвинуть поле ввода в вверх?

 162
Качество видео в теге &lt;video&gt;
HTML

Качество видео в теге <video>

При встраивании видео через тег <video> качество меньше чем у оригинала который лежит на сервере

 179