@annnger

Как сделать анимацию отрисовки линий в canvas?

Написал функцию, которая рисует в канвасе стрелку на координатной прямой от x0 до x1: https://gyazo.com/38ecb65bfec50bf22e25c377430b1e0b . Как сделать, чтобы стрелка появлялась не сразу, а как-будто ее рисуют от руки? Внятных туториалов не нашел, подскажите, в какую сторону копать.
  • Вопрос задан
  • 567 просмотров
Пригласить эксперта
Ответы на вопрос 2
@annnger Автор вопроса
function drawCurvedArrow(start, 
                         end, 
                          curveHeigh
) {
  var x0 = 35
  var y0 = 175;
  var divValue=39;
  var arrowWidth = 15;
  var startPointX = x0+start*39;
  var endPointX = x0+end*39
  ctx.save();
  ctx.strokeStyle = 'tomato';
  ctx.lineWidth = 3;
  var curveCenter = (startPointX+endPointX)/2
  var arrowAngle = Math.atan2(curveCenter - endPointX, curveHeigh - y0) + Math.PI;
  ctx.beginPath();
  ctx.moveTo(startPointX, y0);
  ctx.quadraticCurveTo(curveCenter, curveHeigh, endPointX, y0);

  ctx.moveTo(endPointX - (arrowWidth * Math.sin(arrowAngle - Math.PI / 6)), 
             endPointY - (arrowWidth * Math.cos(arrowAngle - Math.PI / 6)));
  ctx.lineTo(endPointX, endPointY);

  ctx.lineTo(endPointX - (arrowWidth * Math.sin(arrowAngle + Math.PI / 6)), 
             endPointY - (arrowWidth * Math.cos(arrowAngle + Math.PI / 6)));
  ctx.stroke();
  ctx.closePath();
  ctx.restore();
}
Ответ написан
@kulaeff
Front-end developer
Вам надо курить requestAnimationFrame.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы